A combination of position sticky elements with fixed height of VH. Then by applying 'While scrolling in view' animation at specific timeframe to create this type of interaction. Interaction applied on 'c-header' and 'c-lottie'. Adjust the VH on those classes to change the animation speed on each scroll. The lower the VH the faster the animation. Do take note to keep a minimum of 200VH.
Scroll down to view demo.
Press "Ctrl + E" or "Cmd + E" in the Designer and enable "Select on-page element".
Search for the class named, "Cloneable Area".
Copy the element inside this container to your own project.
Rename the classes accordingly if they are clashing with your project.
Ensure custom code from the in-page setting has been copied into your project as well (if there's any).
'Page Trigger' interaction can't be copied directly. You can only clone the whole project, or rebuild it.
A simple trick to copy the 'Page Trigger' interaction into another project is as below:
1. Create a dummy element.
2. Apply any type of 'Element trigger' into the dummy element and select the 'Page Trigger' animation.
3. Copy the dummy element with the animations applied into your new project.
4. The animation should have been copied into your project and you can reapply the 'Page Trigger' animation into your project.
If you have further inquiry or need assistance, feel free to contact us.
Lastly, please do not copy this project and claim it as your own. We wish to continue sharing and giving to the community. In order to do so, we will need your cooperation and full support. Thank you very much,
