Jump to content
Search Community

What do tween durations mean when using scrolltrigger?

skipper42 test
Moderator Tag

Recommended Posts

I'm having a hard time understanding how "duration" on tweens and "start/end" values on scroll trigger work together. I want my tween durations to be a percentage of the total scroll distance. If I have this:

 

        var master = gsap.timeline({
            scrollTrigger: {
                trigger: ".animation-start",
                start: "top 20%",
                end: "+=2800",
                scrub: true,
            },
        });

 

Within master I have added other timelines, and each timeline has tween (durations). How do I say, "I want this tween to be 20% of the total timeline, and this tween to be 10%...?" What's the best way to do this?

Link to comment
Share on other sites

Hi skipper!

 

Don't think about duration as time. Think about it in percentages.

 

gsap.timeline({ scrollTrigger: {} })
.to(foo, { duration: 100 }) 
.to(bar, { duration: 40 }, 10); 

Can you tell what's going to happen. The foo animation is going to be played for entire scroll distance. The bar animation is going to start 10% of the way in.

 

 

 

  • Like 5
Link to comment
Share on other sites

Hi. Yes, however how does this work for nested timelines? I'm following the example from modularize your animation code. From this example, each panel is a timeline with multiple tweens. How do I get tweens to run for X percent of the WHOLE timeline (e.g. master)? Thank you.

 

Also, can you clarify, "The foo animation is going to be played for entire scroll distance." These tweens run in succession, "foo" first, then "bar", so how can one play for the entire scroll distance?

 

Link to comment
Share on other sites

Those tweens don't run in succession.

foo will start, then at 10% of the way through the scroll distance bar will play, (note the position parameter)

 

In terms of nested timelines - timelines don't themselves have a 'time' - they're just containers. So the master timeline would just take on the length of the longest tween or timeline you add to it. 

  • Like 1
Link to comment
Share on other sites

If you're battling to wrap your head around it I would recommend 

1) Make a simple timeline with scrollTrigger
2) And some markers for visual feedback - markers:true
3) Add scrub:true so that the timeline is linked right up to the scroll

then play around with values.

  • Like 2
Link to comment
Share on other sites

Thank you both for the assist. I wanted to slooooow my timelines down considerably (ie. lots of scrolling). I had to set massive durations (like in the thousands) on all the tweens. I also had to set a massive 'end' value on the scrollTrigger. It's working how I want now.

 

This is the first time I'm using gsap with my company. Of course we have to go and create the most complicated animation to start with. 🙄 Thanks again.

Link to comment
Share on other sites

5 minutes ago, skipper42 said:

I had to set massive durations (like in the thousands) on all the tweens.

 

Again, if you're scrubbing, the durations aren't real-time durations. They are ratios. To slow them down you just need to increase the scroll trigger's end.

 

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