Phil Nichols

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: timeline //Hide loop .set("#js-animation-loop", { opacity: 0 }) //Init Tween BG position .set("#js-animation", { backgroundPosition: "0px 0px" }) //Play Tween 1 .add(tween1) //Show loop .set("#js-animation-loop", { opacity: 1 }) //Init Tween BG position .set("#js-animation", { backgroundPosition: "0px 0px" }) //Play Blank Tween .add(tweenBlank) //Hide loop .set("#js-animation-loop", { opacity: 0 }) //Init Tween BG position .set("#js-animation", { backgroundPosition: "0px 0px" }) //Play Tween 2 .add(tween2);

Hi, I have updated my description and created a CodePen hopefully this helps? https://codepen.io/philnichols/pen/NWKEYrY 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) ... End And it all needs to go backwards when scrolling back up the page. Here is a CodePen: https://codepen.io/philnichols/pen/NWKEYrY 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.