scrolltriger Scroll the entire section

[danshk]

Hi everyone, I'm writing here for the first time as I see that your community is quite developed, it's cool, thank you. I don't have more experience with GSAP, but I'm trying to realize this effect I have a page where the first block always takes 100vh, and as soon as I initiate a scroll event (any, strong or weak) my block automatically scrolls (I can't interrupt this event) and when it reaches the start of the second block, the effect turns and I can safely scroll the page. I'm trying to implement this, but I keep running into various bugs, I used to write it via Framer Motion, but now I'm trying to rewrite it on GSAP as I think this solution is more suitable for this effect. Does anyone have similar cases or maybe a demo to share some advice? Thank you very much

 

 

I mean, in a nutshell. The point is that you can't scroll partially through the first block, only always the whole block. And then the page starts to work like normal scrolling in the browser on the next blocks

 

https://codesandbox.io/p/devbox/scroll-sections-txdh67?file=%2Fsrc%2FApp.tsx

See the Pen src by p (@p) on CodePen

[Rodrigo]

Hi,

 

I'm on my phone now so I can't have a good look at your demo, but this codepen should give you a good idea about how to proceed on this case:

 

See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen

 

Instead of using a class toggling, use scrolltrigger toggleActions config, to play the animation in the onEnter part:

 

toggleActions
String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Something like this but without reversing the animation

 

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps

Happy Tweening!

[danshk]

.

[danshk]

25 minutes ago, Rodrigo said:

Hi,

 

I'm on my phone now so I can't have a good look at your demo, but this codepen should give you a good idea about how to proceed on this case:

 

 

 

 

Instead of using a class toggling, use scrolltrigger toggleActions config, to play the animation in the onEnter part:

 

toggleActions
String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Something like this but without reversing the animation

 

 

 

 

Hopefully this helps

Happy Tweening!

It's a little off the beaten path for me. When I scroll back up, this block will be called immediately, at any moment. For me, though, it should exist as any block in the markup
I've attached a link to the sandbox, there's my working example which I'd like to improve with GSAP

[Rodrigo]

Still on the phone so I can't check your demo, but based on your description maybe something like this with the scrollTo plugin

 

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[danshk]

1 hour ago, Rodrigo said:

Still on the phone so I can't check your demo, but based on your description maybe something like this with the scrollTo plugin

 

 

 

 

Happy Tweening!

Yeah, it's pretty similar. But does GSAP provide any additional tools to improve smoothness on mobile + computers. Where I'm going with this, at the moment this animation looks pretty twitchy

[GSAP Helper]

4 hours ago, danshk said:

Yeah, it's pretty similar. But does GSAP provide any additional tools to improve smoothness on mobile + computers. Where I'm going with this, at the moment this animation looks pretty twitchy

Are you saying the demo that @Rodrigo provided isn't very smooth for you? Or are you talking about your project? 

 

Performance is a really deep topic, but there are strategies you can employ. Here are some tips: 

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!