Phil Nichols
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Phil Nichols
-
-
Hi, I have updated my description and created a CodePen hopefully this helps?
Thanks,
Phil
-
Hi, I would like to create a scroll controlled animation with loop points along the way at key sections.
I am currently animating sprites using GSAP SteppedEase functionality to trigger animated sprites frame by frame via ScrollMagic (in Vue.js).
This is working fine for one animation, however I would like to sequence multiple animations and add looped animations that auto run until the user scrolls again then start another animation / tween etc.
So it would look something like this:
Intro sprite animation sequence (linear)
Scroll scroll
Animation sprite (loop)
Scroll scroll
Next animation sequence (linear)
Scroll scroll
Animation sprite (loop)
Scroll scroll
Next animation sequence (linear)
Scroll scroll
Animation sprite (loop)
...
EndAnd it all needs to go backwards when scrolling back up the page.
Here is a CodePen:
However I would like the pink and green tweens to loop indefinitely (independently of the scroll ) untill the next scroll marker is reached, then switch back to the linear / scroll controlled tweens.
The reason is we would like users to stop scrolling and read some text on the page at certain points but still have an animation looping in the background whilst they do this, until they carry on scrolling again.
Do you think this is the correct approach?
Thanks in advance for any help.
See the Pen NWKEYrY by philnichols (@philnichols) on CodePen
ScrollMagic / GSAP / Sprite animation sequence
in GSAP
Posted
I think I may have found a way to do this by using tweens within divs stacked on top of each other and by showing and hiding the loop tween div with a blank tween underneath a bit like this (not sure if this is the best approach (?) but it seems to work: