scrolltrigger Diagonal scrolling of many chained svg elements/lottie anims w/ ScrollTrigger + snap

[just_nick]

Hello, i'm trying to create this animation in which I will have many lottie animations that will be chained one after another (basically, it should've been only one big animation, but I don't think it would've been good performance-wise, so I'll have to split in more animations and position them so they connect seamlessly and only play one or two at a time). For now I'm using svgs to test things out.

 

My issues are the following: 

1: Each section has a different height and will need to be scrolled a slightly different vertical/horizontal amount, and I'm not sure I'm doing it correctly. Is it ok to animate the same properties of the same element in the same scrolltrigger like I'm doing?

2: Sometimes the performance doesn't seem great and I was wondering if the issue was the way I'm chaining the svgs together and gsap having to do some more intensive work (?)

3:  I can't get the snapping to work perfectly and i'd really appreciate some suggestions on how to achieve that. For now I just managed to get a magic number working ( snap: 1/5.24). 

 

Here's the codesandbox, I didn't use codepen because It didn't allow me to add custom images as files

 

https://codesandbox.io/p/sandbox/lively-field-29rqgq?workspaceId=0594864b-79ee-45da-baa8-7022bffe9845

[mvaneijgen]

Hi @just_nick welcome to the forum!

 

First of be sure to check out this post from the docs, might give you some extra insight https://gsap.com/resources/mistakes/

 

The values you're using x: "-88vh",   y: "-112%", I would change the first one to use function based values (https://gsap.com/docs/v3/GSAP/Tween/#function-based-values) these recalculate on ScrollTrigger.refresh()  which happens for instance on browser resize, so x: () => -(window.innerHeight * 0.88) would be the same as you have now, but would be more dynamic. and for your y: "-112%" check out yPercent: -112, would do the same, but is written more clearly and in my opinion better. 

 

For the snapping, currently what you do is create some value and have the snapping snap to multiples of that value. Lets say you your calculation where 1/5 you would get 0.2, which means snap to increments of 20% this would be 0, 0.2, 0.4 ... 1. In stead of a single value in the snap property you can also use an array eg, snapTo: [0.1, 0.38, 0.83, 1], this would only snap to those values, which would be more appropriate in your case seeing that the elements are not of the same height. Note that you can also add labels to your timeline and have ScrollTrigger snapTo: "labels" this could save you a lot of calculations, check the snap docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#snap

 

Also currently your scroll seems larger then your animation or you're moving something of screen and thus getting a white space underneath it. Personally I find that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Below your demo without ScrollTrigger, this is what your animation is doing is this correct? Because that is also what ScrollTrigger will be doing, so starting with the correct animation is vital in this case. Hope it helps and happy tweening! 

 

https://codesandbox.io/p/sandbox/compassionate-joji-nrjlj4?from-embed=&workspaceId=bcaaa07d-32c6-463f-8f71-8f69ac714b73

[just_nick]

Hi @mvaneijgen, thank you very much for the fast response!

 

So, the whitespace thing is just an additional padding I added to show some more non-relevant stuff after the animation ends, I forgot to remove it for the demo. I apologize.

 

As for the rest I tried those changes and it's definitely more readable and easy to understand. There's still some stuff that seems weird, like for example, why does any other snap easing other than power4.inOut makes it very difficult to scroll back up? If I try linear or power3 you have to basically scroll up until the very top for the snap to go up, otherwise it drags you back down. I don't understand what's the issue with that. Also, not sure if it's a lenis thing, but when I use the navigation in the top right, the scrollTrigger messes with the scroll and makes it look a bit laggish, probably because of the snap trying to get a hold of the scroll. It's most notable when going from sections 1-2 to 5. This happens also after the suggested changes. Or is it because of the padding not being placed perfectly? I did this sort of padding hack because I had no idea how else to be able to scroll to one of the sections. Is there a proper alternative using gsap only?

 

Also, the codesandbox you linked me says "not found" 😕

[mvaneijgen]

19 minutes ago, just_nick said:

So, the whitespace thing is just an additional padding I added to show some more non-relevant stuff after the animation ends, I forgot to remove it for the demo. I apologize.

No worries, but this will make it hard to line up things using a magic number, I think you're better of using labels, and then add labels to the timeline where you want things to 'stop'.

 

 

I'm not sure, never used Lenis. We use ScrollSmoother https://gsap.com/docs/v3/Plugins/ScrollSmoother/ here a smooth scrolling plugin that works perfectly with all the GSAP tools.

 

Scrolling to a specific ScrollTrigger point is fairly easy using GSAP, I made a post all about the logic. Also pay special attention the the first reply, it hosts some handy helper functions, which might help you. 

 

My apologies, the Codesandbox should now be public. We use Stackblitz more over here and that seem to enver the settings from he shared demo, but here is makes it private by default, the more you know. 

 

https://codesandbox.io/p/sandbox/compassionate-joji-nrjlj4?file=%2Fsrc%2Findex.js%3A43%2C17&from-embed=&workspaceId=bcaaa07d-32c6-463f-8f71-8f69ac714b73

 

Hope it helps and happy tweening! 

[just_nick]

2 hours ago, mvaneijgen said:

Scrolling to a specific ScrollTrigger point is fairly easy using GSAP, I made a post all about the logic. Also pay special attention the the first reply, it hosts some handy helper functions, which might help you. 

That post was super helpful, indeed now jumping between sections feels much more fluid. Although there's still the issue mentioned before of the easing not allowing to scroll back up without having to go up. This happens even after all the suggested changes and even removing the padding elements and adding artificial padding by specifying  end: '+=5000'...  You can check in the original codesandbox that if you change the easing to linear or anything that isn't power4.inOut the snapping doesn't feel normal. For example, just a slight scroll down will snap to the one below, but even after 1-2 scrolls up won't be enough to go back up. Not sure if I'm being clear enough, sorry

[mvaneijgen]

If I remove lenis it works as I would expect, so you might have to ask them for support. Lenis is not a GSAP tool, so we can't really provide support for it on this forum, hope you understand. 

 

Again Scroll Smoother works perfectly with all the GSAP tools, so my advise would be go with that, but it is your project. 

 

Hope it helps and happy tweening! 

[just_nick]

Ah you're right lenis seems to be the problem there. Alright thank you very much anyway for the help, I really appreciated it.