Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Phil Nichols

ScrollMagic / GSAP / Sprite animation sequence

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:

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.


 

Share this post


Link to post
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

Share this post


Link to post
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);

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hey @Phil Nichols,

 

Welcome to the GreenSock Forum.

 

What exactly you want to achieve, what effect with which impression, I do not know.
Therefore here only for fun:  rolling, scrolling numbers

 

See the Pen zYOMLev by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×