Jump to content
Search Community

Reset animations triggered by Scrollmagic

jvolvovski 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 am using scrollmagic to build a website where multiple panels overlap each other on scroll.

 

Once you land on the 2nd panel, a separate timeline plays out, triggered by an onComplete function.

When you scroll back up, I don't want the animation to replay, I just want it to scroll back up on the static last frame.

But if you scroll all the way up, and then down, I would like for it to repeat.

In my codepen, it only plays once, and I can't get it to replay the animation.

 

What would be the best way to do this?

 

Thank you,

Jenny

See the Pen JNrVKa by jvolvovski (@jvolvovski) on CodePen

Link to comment
Share on other sites

Hi jvolvovski  :)

 

Welcome to the GreenSock forum.

 

If I understand your desired outcome correctly, you'd want to create the timeline outside of your onComplete function. (no need to create it each time you hit the trigger) You can put it into a paused state and then play() it when you hit the panel 2 trigger each time. Like this: 

var secondPanel = new TimelineMax({paused:true});
  secondPanel.to("section.panel.two p", 2, {scale:2, ease:Power3.easeOut});
  secondPanel.to("section.panel.two p", 2, {color:"#fff", ease:Power3.easeOut});

function myFunction() {
  secondPanel.play(0);
 }

Keep in mind that it will jump back to the beginning each time you hit the trigger and call the onComplete function. You could check if it isActive() and prevent it from starting over multiple times with rapid scrolling, but this should get you close to your goal. If you want to reset it when you scroll all the way to the top, you'd have to add some custom logic and seek() back to the beginning or something along those lines.

 
Hopefully that helps.
 
Happy tweening.
:)
  • Like 4
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...