Jump to content
Search Community

ScrollMagic / GSAP / Sprite animation sequence

Phil Nichols test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:

 

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

Link to comment
Share on other sites

Hey Phil and welcome to the forums,

Maybe this post by our very own Craig can help you:

 

Past that, we'd need a demo to be of any help but it doesn't seem like you have a specific issue you're running into?
 

Do note that ScrollMagic isn't a GreenSock product. We really try to keep these forums focused on GSAP-specific questions.  

 

Good luck with your project!

  • Like 1
Link to comment
Share on other sites

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);
Link to comment
Share on other sites

2 hours ago, Phil Nichols said:

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

That seems like a reasonable way of doing it to me. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...