Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SteveS

Quick question about ScrollTrigger conventions

Go to solution Solved by PointC,

Recommended Posts

I'm animating a section such that when it comes to the middle of the screen, it is full opacity for a small distance and then it fades back to its original opacity. I am achieving the effect with the following code:
 

const anim = gsap.to(containerRef.current, {
            opacity: 1,
            scrollTrigger: {
                trigger: containerRef.current,
                start: "top center",
                end: "25% center",
                scrub: true
            }
        })

        const anim2 = gsap.to(containerRef.current, {
            opacity: 0.2,
            scrollTrigger: {
                trigger: containerRef.current,
                start: "75% center",
                end: "bottom center",
                scrub: true
            }
        })

I'm just curious if this is an okay way of achieving the effect. Is there a more performant method?

Link to comment
Share on other sites

You can do it like that or you could use a yoyo tween. Something like this should work:

 

const anim = gsap.to(containerRef.current, {
  opacity: 1,
  ease: "none",
  yoyo: true,
  repeat: 1,
  repeatDelay: 2,  
  scrollTrigger: {
    trigger: containerRef.current,
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Thanks for the reply, it pretty much answers my question, but introduced a few more:
 

  1. In my original way of doing it, is there a performance hit for creating multiple scrollTriggers, or do all scrollTrigger animations propagate to a single scrollTrigger? Say I had twenty, fifty, or even on hundred elements. Is it creating a new scrollTrigger for each one?
  2. In my method I am able to have a brief period of scroll where the animation doesn't change, with the yoyo method (which I prefer since it decreases the number of tweens) is it possible to get the same effect?
Link to comment
Share on other sites

  • Solution

I don't think there's anything wrong with the way you did it and a few extra ScrollTriggers aren't going to make a noticeable difference. Jack is a performance connoisseur so I trust GSAP and don't get too wrapped up in all things performance until I notice something chugging along. That's almost always going to be a rendering issue though. 

 

The yoyo tween I posted above will have a brief period of time with nothing changing. That's why there is a repeat delay. Say you have the above code with a 1 second tween duration and a 2 second repeat delay. That's a total of 4 seconds. So, the first 25% of the scrub will be the tween to full opacity. 25% → 75% of the scrub is nothing as that is the delay. Then 75% → 100% would be the fade back to the original opacity.

 

Make sense?

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Ok, so duration on a tween that is attached to a scrollTrigger using scrub will always take up the entirety of the scroll distance. i.e. putting a duration of 10 seconds will not change the tween progress versus a duration of 4 seconds.

My last question here is: is there a way to manually control the tween progress during a scrub? For example, the effect of the previously discussed tween can be described by a function with the chart
image.png.54f17b2cb2e05391ffc022d70f26b8f3.png
Where the function accepts values between 0 and 1 as the progress of the tween (duration or scrub progress) , and returns a % value of the animation (animation progress).

Is it possible to get the with custom eases or otherwise? Syntactically I find it appealing to work in this way.

Link to comment
Share on other sites

Correct - the duration of a tween doesn't make much difference with scrub. It's all about ratios. Two 1 second tweens on a scrub timeline will be the same as two 10 second tweens on a timeline. (Each taking up 50% of the scroll distance) However, changing just one of them to 10 seconds will make a big difference.  Now, the 1 second tween is only taking up approximately 9% of the scroll distance while the 10 second one is take up approximately 91% because we have a total of 11 seconds.

 

My personal preference is to use linear eases on scrub tweens/timelines, but yes you can certainly use a custom ease on a scrub tween if that's your preference. I'd say just give it a try and see what what works.

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

Awesome, thanks for all the information!

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