ScrollTrigger Timeline (pin:true) + scrollSmoother

[kubik101]

Hi.

 

Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines.

 

I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible.

 

Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned?

 

timeline code is here if it helps:

 

let tl = gsap.timeline({
    onUpdate: render,
    defaults: {
        ease: 'none',
    },
    scrollTrigger: {
        trigger: section,
        pin: true, // pin the trigger element while active
        start: 'top top', // when the top of the trigger hits the top of the viewport
        end: '+=1000%', // end after scrolling 500px beyond the start
        scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1
        anticipatePin: 1,
        invalidateOnRefresh: true,
    },
})

 

[Cassie]

 

Quote

 

Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines.

I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible.

 

 

Hiya - You can use pinned timelines with ScrollSmoother. Yes.

However - The animation performance isn't just down to the action of pinning and smooth scrolling, that's very base level. It'll be far more likely to be affected by the properties you're animating, how much you're animating, the area that's being animated, the device and browser and the duration of the animation. The code snippet you've include doesn't contain any of that information so I can't really advise too much.

Here's some catch-all tips though.

 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

 

I hope this helps!  💚

[kubik101]

Hi Cassies.

Thanks for all the above extra info.

 

I included my timeline code so that it was clear I was talking about a pinned scrollTrigger timeline.

 

My question has not quite been answered, I may have complicated it, let me try again.

 

For any scrollTrigger timeline even the simplest, would adding scrollSmoother be good/best practice to help give some extra polish (good feeling)?

(not using any parralax etc, but simply just registering it and applying it to the timline?)

 

Thank you.

😃

[mvaneijgen]

@kubik101 personally I'm not a fan of any smooth scrolling applied to my webpages, the effect can be over done really fast and when that happens I get 'sea sick' scrolling through the page (and I can hang around in VR for hours, as a side note). I've found just setting the scrub value to something like scrub: 0.1 is enough to get a 'smooth' feel, be sure to at ease: "none" to all your scrubbed tweens. 

 

Also to my knowledge the smoothScroll plugin can only be added to the whole page, not individual ScrollTrigger.

 

Hope it helps and happy tweening!