Why does the animation work before scrolling?

[AlexanderGS 3 Likes (Newbie)]

Good evening.
Why does the animation work if I haven't even scrolled to the item yet? Maybe I'm missing something for ScrollTrigger?

See the Pen qBypXzM by Alexxxsander (@Alexxxsander) on CodePen

[akapowl 5,495 Likes (Superhero)]

 

Hello there.

 

That's because you never hooked your timeline up to your ScrollTrigger in the first place.

 

Also, your element's top will never actually reach the top of the window to start scrubbing it, as you don't have that much scrollable space. Another thing to consider is that when you set your end to 'bottom bottom', it means 'end when the bottom of the element hits the bottom of the viewport', which happens waaay earlier than the start in your case. So you might want to reconsider your start and end, too.

 

The docs have some quite good explanations on start and end, and all the other properties like animation e.g.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

As another sidenote: 

In a fromTo tween, duration and delay do only go in the To part of the fromTo.

 

Apart from that, I don't think the delay property even does serve a purpose on tweens scrubbed by ST (I might stand corrected). But at least the duration will definitely pretty much do nothing on a scrubbed tween, if you only have that one tween anyway .

 

Here is your timeline being scrubbed over the distance it is in viewport, just to give you an idea for how to approach it.

 

See the Pen LYBezNq by akapowl (@akapowl) on CodePen

 

[AlexanderGS 3 Likes (Newbie)]

36 minutes ago, akapowl said:

 

Hello there.

 

That's because you never hooked your timeline up to your ScrollTrigger in the first place.

 

Also, your element's top will never actually reach the top of the window to start scrubbing it, as you don't have that much scrollable space. Another thing to consider is that when you set your end to 'bottom bottom', it means 'end when the bottom of the element hits the bottom of the viewport', which happens waaay earlier than the start in your case. So you might want to reconsider your start and end, too.

 

The docs have some quite good explanations on start and end, and all the other properties like animation e.g.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

As another sidenote: 

In a fromTo tween, duration and delay do only go in the To part of the fromTo.

 

Apart from that, I don't think the delay property even does serve a purpose on tweens scrubbed by ST (I might stand corrected). But at least the duration will definitely pretty much do nothing on a scrubbed tween, if you only have that one tween anyway .

 

Here is your timeline being scrubbed over the distance it is in viewport, just to give you an idea for how to approach it.

 

 

 

 

Why does transparency work in stages? Instead of going from opacity: 0 to opacity: 1 all at once?

[akapowl 5,495 Likes (Superhero)]

 

I'm not sure, I understand what you mean by 'in stages'. It would help if you could elaborate a bit on what it is you expect to happen.

 

I connected your timeline to the scrubbing ScrollTrigger you had there, which I thought was what you wanted to happen.

 

Scrub will always stretch out the connected animation over the scroll-distance between your start and end.

 

If you want to just toggle the playstate of an animation, have a look at toggleActions instead of scrub in the docs.

 

[AlexanderGS 3 Likes (Newbie)]

9 minutes ago, akapowl said:

 

I'm not sure, I understand what you mean by 'in stages'. It would help if you could elaborate a bit on what it is you expect to happen.

 

I connected your timeline to the scrubbing ScrollTrigger you had there, which I thought was what you wanted to happen.

 

Scrub will always stretch out the connected animation over the scroll-distance between your start and end.

 

If you want to just toggle the playstate of an animation, have a look at toggleActions instead of scrub in the docs.

 

The element has an opacity property that changes from 0 to 1 depending on page scrolling. This is what I mean by that. 

[Rodrigo 5,910 Likes (Superhero)]

Hi,

 

If you want for your animation to start at certain point and not depend on how much the user has scrolled up/down, then, as @akapowl mentions, use toggleActions in your ScrollTrigger instance.

 

Based on Paul's last example give this a try:

gsap.registerPlugin(ScrollTrigger);

let timeline = gsap.timeline();

timeline.fromTo(".gsap", {
  opacity: 0
}, {
  opacity: 1
});

ScrollTrigger.create({
  trigger: ".gsap",
  start: "top bottom",
  end: "bottom top",
  toggleActions: "play none none reverse",
  markers: true,
  animation: timeline
});

I strongly recommend you to take a look at the ScrollTrigger docs, resources in the learning center and GreenSock's youtube channel:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

https://www.youtube.com/c/GreenSockLearning

 

Happy Tweening!