Jump to content
Search Community

Change speed of ScrollTrigger animations on Timeline

Brittany@Decisely test
Moderator Tag

Recommended Posts

Hey! Suuuuper new to GSAP. 😅

 

I'm setting up a timeline, and I have ScrollTrigger attached to the scrollbar. There are certain elements on the timeline that I want to slow down their animation 'cause they fly onto the page at the slightest touch of the scroll bar. What property or properties do I need to add or adjust to do this? Here's my code:

 

** And to add, I've tried changing the duration, delay, and scrub; none of those seem to have had an effect on the time it takes to scroll through an animation.

 

let hcSection = gsap.timeline({
    scrollTrigger: {
      trigger: "#healthcareHome",
      pin: true,
      start: "top top",
      end: "+=1000",
      scrub: 2, 
    }
  });

hcSection.from('#healthcareHome .circle svg', {
  duration: 2, 
  delay: 0.5,
  x: '+=200px', 
  y: '100%', 
  scale: 0, 
  autoAlpha: 0, 
  rotation:'360',
  ease: "power4",
}).from(".healthcare-home-text", {
  duration: 2, 
  delay: 0.5,
  y: '90%', 
  autoAlpha: 0, 
  ease: 'power4',
}).from("#healthcareHome .web-browser",{
  duration: 2, 
  delay: 0.5,
  y: '90%', 
  autoAlpha: 0,
  ease: 'power4',
}).from("#hcBrowserSVG path, #hcBrowserSVG circle, #hcBrowserSVG g, #hcBrowserSVG text", {
  duration: 2,
  scale: 1.5, 
  ease: "linear", 
  force3D: true,
  opacity: 0,
  delay: 0.2,
  stagger: 0.2,
  transformOrigin:'50% 50%',
}).to('#healthcareHome .row', {
  duration: 2,
  scale: 1.5, 
  ease: "linear", 
  force3D: true,
  opacity: 0,
  delay: 0.5,
  stagger: 0.2,
  transformOrigin:'50% 50%',
});

 

Link to comment
Share on other sites

Hey Brittany and welcome! Thanks for supporting GreenSock with your Business Green membership. 

 

If you're applying a ScrollTrigger on a timeline with scrub, the durations of tweens within that timeline serve as proportions for the total amount of distance. It's easiest to understand with an example:

 

Say you have a timeline with three tweens: a 1 second tween, a 2 second tween, and then another 1 second tween. And the ScrollTrigger applied to it will animate for a full viewport height's distance (perhaps the trigger is a full viewport height element and you use the values of start: "center bottom" and end: "center top"). If scrub: true (or a number) is applied, then the first tween will be animating between when the center of the trigger element is between the 100% mark (from the top; the bottom of the viewport) and the 75% mark (from the top) of the viewport. The second tween will fire when the center of the element is at the 75% mark until the 25% mark. And the third tween will fire when the center of the element is between the 25% mark and the 0% mark. If you changed the duration of all the tweens to the same number, say 1, then the percentages would all be equal: 100% -> 66%, 66% -> 33%, 33% -> 0%. Does that make sense?

 

So the duration values don't matter too much, but the the proportions of the duration of each tween compared to the total time of the timeline with scrub: true does matter. It might be helpful to use a total duration of the timeline (like 1 second or 10 seconds) so that it's easier to think about the proportions of how much you want an animation to run.

  • Like 2
Link to comment
Share on other sites

@ZachSaucier Thank you! I believe that makes sense. I was having difficulty understanding how the start and end variables worked, but your explanation helps a bit! I also turned the markers back on to visually see how the values affect when/where the tweens fire.

 

As far as adding the duration to the timeline - if I'm understanding correctly - I'm assuming you mean using the duration method? hcSection.duration(10); 

Link to comment
Share on other sites

24 minutes ago, Brittany@Decisely said:

As far as adding the duration to the timeline - if I'm understanding correctly - I'm assuming you mean using the duration method? hcSection.duration(10);

No, I just mean making sure that your tweens inside of a timeline add up to a certain time (like 1 or 10) in this case. That way it's easier conceptualize how much of the scrubbing section that tween is using. It's not required, I just thought it might be helpful.

Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

No, I just mean making sure that your tweens inside of a timeline add up to a certain time (like 1 or 10) in this case. That way it's easier conceptualize how much of the scrubbing section that tween is using. It's not required, I just thought it might be helpful.

 

Gotcha... so just to make sure I'm understanding this time 😅 ...

 

If I were to keep the total duration of the tweens at 10 (like my example), but instead of 2, 2, 2, 2, and 2, I changed the duration of the first tween to 6 and the other four to 1, the first tween would take up 6/10 of the total duration time, and the other four would each be 1/10 of the duration?

Link to comment
Share on other sites

  • 4 weeks later...

Hi, let me ask about what in this post is said. 

As i understood, there is no way to reduce the speed of all the animations at the same time, and you can only reduce the speed in a relative way, making ones faster than anothers. (Isn`t it?)

I just want to confirm it, because its just what i need.

Thanks for the help.

Link to comment
Share on other sites

2 hours ago, David Carrio Ricardo said:

there is no way to reduce the speed of all the animations at the same time

There is - change the start or end position of the ScrollTrigger to make the scroll distance longer.

 

It might help if you provided a minimal demo of your situation so we can explain in code :) 

Link to comment
Share on other sites

3 hours ago, David Carrio Ricardo said:

Hi, let me ask about what in this post is said. 

As i understood, there is no way to reduce the speed of all the animations at the same time, and you can only reduce the speed in a relative way, making ones faster than anothers. (Isn`t it?)

I just want to confirm it, because its just what i need.

Thanks for the help.

 

Not gonna lie, this took me a hot minute to figure out myself. As Zach said, you need to make the scroll distance longer, and to do that, you adjust your timeline start and end points. For example, this timeline's length is based on the height of the trigger element (from the top to the bottom):

 

let example = gsap.timeline({
    scrollTrigger: {
      trigger: "#example",
      pin: true,  
      start: "top top", // When the top of the trigger reaches the top of the viewport
      end: "bottom top", // When the bottom of the trigger reaches the top of the scroller
      scrub: true, 
      toggleActions:"restart complete reverse reset",
    }
  });

 

To make this timeline longer, I adjusted the end point:

 

let example = gsap.timeline({
    scrollTrigger: {
      trigger: "#example",
      pin: true,  
      start: "top top", // When the top of the trigger reaches the top of the viewport
      end: "bottom -150%", // When the bottom of the trigger goes 150% past the top of the scroller
      scrub: true, 
      toggleActions:"restart complete reverse reset",
    }
  });

 

By adjusting it to -150%, I just extended the timeline by 150%, so now when I adjust my durations for each tween, the length of the timeline will be based on the height of the the trigger element + 150%.

 

...

 

This is how I did it, and it's worked for me, but Zach, feel free to correct me if I'm wrong! :)

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

4 minutes ago, David Carrio Ricardo said:

I would like, but my animation uses images i have on my pc, and cannot uoload them in codepen as im not premium.

You can use any image stand-in service like placekitten, unsplash, or a bunch of others. We don't need to see your actual images (or even images at all - a few colored divs would likely be even easier).

Link to comment
Share on other sites

15 minutes ago, Brittany@Decisely said:

By adjusting it to -150%, I just extended the timeline by 150%, so now when I adjust my durations for each tween, the length of the timeline will be based on the height of the the trigger element + 150%.

I'm surprised that the negative sign did what you wanted to. I would think it would be positive to make it longer. 

Link to comment
Share on other sites

29 minutes ago, ZachSaucier said:

I'm surprised that the negative sign did what you wanted to. I would think it would be positive to make it longer. 

 

Think of it like absolute or relative positioning (CSS). If I set an element to position: absolute and add top: -150% to the element, it moves the element 150% up the y-axis, and if I were to set it to top: 150%, it pushes the element 150% down the y-axis. Essentially, when setting the end point to "bottom top",  you're saying "bottom 0%"... if that makes sense. lol... So by putting "bottom -150%", it's saying when the bottom goes 150% up past the top of the scroller (the animation won't end until the bottom is 150% up past the top, so you're extending it 150%), and if I were to put "bottom 150%", the animation would end when the bottom of the trigger is 150% down below the scroller.

Link to comment
Share on other sites

18 minutes ago, Brittany@Decisely said:

 

Not gonna lie, this took me a hot minute to figure out myself. As Zach said, you need to make the scroll distance longer, and to do that, you adjust your timeline start and end points. For example, this timeline's length is based on the height of the trigger element (from the top to the bottom):

 


let example = gsap.timeline({
    scrollTrigger: {
      trigger: "#example",
      pin: true,  
      start: "top top", // When the top of the trigger reaches the top of the viewport
      end: "bottom top", // When the bottom of the trigger reaches the top of the scroller
      scrub: true, 
      toggleActions:"restart complete reverse reset",
    }
  });

 

To make this timeline longer, I adjusted the end point:

 


let example = gsap.timeline({
    scrollTrigger: {
      trigger: "#example",
      pin: true,  
      start: "top top", // When the top of the trigger reaches the top of the viewport
      end: "bottom -150%", // When the bottom of the trigger goes 150% past the top of the scroller
      scrub: true, 
      toggleActions:"restart complete reverse reset",
    }
  });

 

By adjusting it to -150%, I just extended the timeline by 150%, so now when I adjust my durations for each tween, the length of the timeline will be based on the height of the the trigger element + 150%.

 

...

 

This is how I did it, and it's worked for me, but Zach, feel free to correct me if I'm wrong! :)

Ohh lord i am very grateful for your help. It`s all as Zach said, but i had a start. top top, end bottom top, and actually couldn`t figure out how to increase the distance. 

With this i was able to solve the issue, honestly thanks to both of you. ;) 

  • Like 1
Link to comment
Share on other sites

12 minutes ago, David Carrio Ricardo said:

Ohh lord i am very grateful for your help. It`s all as Zach said, but i had a start. top top, end bottom top, and actually couldn`t figure out how to increase the distance. 

With this i was able to solve the issue, honestly thanks to both of you. ;) 

 

You can definitely toy around with that end number, and turning on the markers is also super helpful! :)

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 6/16/2020 at 7:36 AM, ZachSaucier said:

Hey Brittany and welcome! Thanks for supporting GreenSock with your Business Green membership. 

 

If you're applying a ScrollTrigger on a timeline with scrub, the durations of tweens within that timeline serve as proportions for the total amount of distance. It's easiest to understand with an example:

 

Say you have a timeline with three tweens: a 1 second tween, a 2 second tween, and then another 1 second tween. And the ScrollTrigger applied to it will animate for a full viewport height's distance (perhaps the trigger is a full viewport height element and you use the values of start: "center bottom" and end: "center top"). If scrub: true (or a number) is applied, then the first tween will be animating between when the center of the trigger element is between the 100% mark (from the top; the bottom of the viewport) and the 75% mark (from the top) of the viewport. The second tween will fire when the center of the element is at the 75% mark until the 25% mark. And the third tween will fire when the center of the element is between the 25% mark and the 0% mark. If you changed the duration of all the tweens to the same number, say 1, then the percentages would all be equal: 100% -> 66%, 66% -> 33%, 33% -> 0%. Does that make sense?

 

So the duration values don't matter too much, but the the proportions of the duration of each tween compared to the total time of the timeline with scrub: true does matter. It might be helpful to use a total duration of the timeline (like 1 second or 10 seconds) so that it's easier to think about the proportions of how much you want an animation to run.


Big thanks, I was wracking my brain to trying to figure out why those properties were not working. You explained it perfectly. Once armed with the right mindset on how to see it I was able to manipulate it to how I wanted it.

Also, I used some absolute position to the start of the scroll animation on my tweens. And again, using the mindset of relative to each other, I used values that were relative to the durations. I used 1 values for all durations since it was easiest to do. And then added the absolute positions after that. I noticed the absolute values did not work if I took the durations away.

I found this method gave me the most control over my scroll animation.
 

4-24-2022 2-16-28 AM.png

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