Jump to content
Search Community

Why does the animation work before scrolling?

AlexanderGS test
Moderator Tag

Recommended Posts

 

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

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

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.

 

Link to comment
Share on other sites

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. 

image.png.eed5c7fa54e55e111e53ad9025dd9966.png

Link to comment
Share on other sites

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!

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