Jump to content
Search Community

Sync scrub=true tween with end of scrub=false timeline?

hjcohen test
Moderator Tag

Recommended Posts

Hello Green Sock-

 

Can someone help me with a timeline problem?

I have a timeline set up on line 17 and 18 of the JS in the codepen above.  During this timeline, scrub is set to false.  I need to somehow figure out how to set up the tween on line 21 to run after the timeline is finished, but because the scrub parameter changed I can't figure out how to do that.

Can you help please?

 

The root problem is that I want to figure out how to prevent the column on the right side #content1 from scrolling until the animation of the title and subheading on lines 10 and 11 of the HTML is finished animating.   Is my approach of using a timeline correct?

 

Thank you in advance.

See the Pen rNKxgNz by JennEstrada (@JennEstrada) on CodePen

Link to comment
Share on other sites

Your pen wasn't working. I had to spend the frist 10 minutes to get it to work, before I could see any issue. Right now I don't have time anymore, but maybe someone else can take a look without first spending the time, otherwise I'll post back later.

 

As a general tip: The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

Also I would let the browser handle the scrolling, right now you have a lot of nested scrolls, which will make it a lot more complicated to work with ScrollTrigger. Position your elements where you want them to end up and then use .from() tweens to animate them from some other place to the place they are already in.

 

See the Pen XWYdroP?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

Ok, I had some time to spare. 

 

First off layout is really important, if the base you're building something on isn't solid the end result will never hold up its own weight. So I would suggest starting by laying out everything in CSS how you want things to look if they are not animating. (Or how you want them to look when the animation is done)

 

Then focus on the animation. ScrollTrigger is just animating something on scroll, so you need to have the animation ready, before you can even think about adding it too ScrollTrigger. I've split your animations in to two separate timelines. The first animates your text, this was perfectly done, great use of the of the .set() autoAlpha! Then I've add an onComplete function to that timeline, so when the timeline is done, do something else. To this I've added another animation which animates the blocks from a position of 100% of their height. Right now This is all just happening, but I feel the animation is working like it want it to be. 

 

See the Pen oNyxjGb?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

So now I can start with ScrollTrigger. I want it to start when the top of the browser hits the top of the element and end when the top of the browser hits the bottom of the element. And set scrub to true, because you want to have it happen when the user scrolls. I've also set the easing to "none", so that the animation on scroll will be at a consistent speed. And this is what that would look like. 

 

See the Pen LYrNGVW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening! 

  • Like 3
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...