Jump to content
Search Community

Quick question about ScrollTrigger conventions

SteveS test
Moderator Tag

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

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