Hy there!
I have created a site with two buttons. Each of the button leads to a seperate section, following each other. Each section consists of an illustration with a scroll-animation, making appear different image elements sitting on different layers over each other; on the last layer text scrolls up. So far so good, it works, I was happy. Until I realized that …
- …the whole animation plays backwards when you scroll up, in order to go back to the top of the page. This is time an scroll-energy consuming. And not cool.
2)… If you click on the 2nd button, leading to the section, sitting below the first animated section, the whole 1st animation plays before the 2nd section is reached. Also here, this is time consuming and distracting… I don’t like this…
Here is my question: Does anybody know / have an idea, how these animations can be de-activated when scrolling up to the top or when jumping down to section 2 after having clicked on the 2nd button? That by scrolling back up / jumping to section 2 the illustration stays in it’s final phase?
Would it make a difference if these animations would be realized with After Effects as Lotty-animations and then be integrated into webflow?
Would it be possible to solve my problem by converting the buttons into 2 seperate accordions? You click on one button and then flaps out a div displaying my illustration with the scrolling animation? (Is it possible to integrate a scroll-animation into an accordion?)
Or should I create pop-up-windows with the scroll animation inside (if this is possible…)?
Or that by clicking on one button the different animated sections appear on the left / right side of the screen (horizontal orientation)?
I appreciate any ideas!
Here is my public share link: LINK
(how to access public share link)