Gigi1303

Rodrigo, great work as usual. Your solution works great, I didn't think that the issue could be the chars target. Thanks again!

Hello, I'm trying to set up a website like this: - A scale back transition is applied to all images in the page (basically it scales back when it reaches the user view) - A text reveal effect to all headings (could be h1, h2, basically I'd like to trigger this animation by using a class and I'd like it to work regardless on text dimensions etc.). To achieve that I'm using the split type js plugin to split the selected headings in the page into multiple chars and applying the effect by staggering each chars with gsap. - With scrolltrigger I activate the two transitions when it reaches the user's view. As you can see in my pen example, it's not working that great. Basically I don't understand why the two interactions start with so much delay and are not behaving properly. Hope I explained it all clearly to you. Thanks in advance for your help.

I think that is a wonderful starting point. Thanks a lot for everything, @akapowl

Looks very promising. I used it in my simplified original code and the positioning problem seems solved, but I still have to do some testing. Can I ask you another thing? In this project I'd like to add background changes when the next section arrives and I don't know which is the correct way to do it anymore: should I make different scrolltriggers for the background changes? I'd like to keep them separated from the Lotties and pinning but I have fear that this would break something again. Thanks for your help, really!

Hi @akapowl, I see no difference in behaviour by reverting back to gsap 3.1.1, unfortunately. The problem i'm encountering is that the first 2 animations (we make it happen and the black circle on the second section) start points shiftes when you refresh the page. Not always, but a good 75% of the time. Especially if you refresh the page when you reached the bottom of the page.

Updated my pen, simplified it even more. I can't do better than that, unfortunately. As you can see now the triggers are in perfect order as they appear on the page. The updated pen: https://codepen.io/luigi-basile/pen/gOjzKaB Basically what I'd like to do is: - Pin the section - Start the lottie animation on scrolltrigger - Pin the next section, start lottie animation, and so on N times. - After all the pinned sections there's a "normal" one that doesn't pin but contain lotties that have to animate on scroll. What I did: - put a data-refresh attribute on the divs that have to animate to give refresh priority in scrolltrigger (you can see they are commented right now) - put all the scrolltriggers in order as they appear on the page, ditching the for/each loop. Putting the refresh priority parameter breaks everything on the page, even the sections doesn't pin anymore. Thanks as usual.

Tried putting individual triggers, sorted out the order, tried giving priorities, nothing seems to work. It keeps going worse instead. If I put priorities as they should (pin the section, animate lottie, pin the next section and so on) nothing seems to work anymore (even the pin on the section). Disabled everything but the first 2 sections, still no dice. Unfortunately I can't post a simpler example than the one I posted, I will see if I can post an even more simpler pen. Until then, thanks a lot for all your help.

Now I'm really beginning to understand, thanks for the very detailed explanation of what's happening. I'll go back behind the desk, I had a Kamikaze like approach to this project because I was rushed by the deadline, but sometimes you gotta take a step back and not be afraid of redoing everything. Thanks again

Ok, I understand that, unfortunately I couldn't make it simpler than that. So a good solution could be to ditch the for/each loop and put the scrolltrigger (and lottiescrolltrigger) in order as they appear on the page? In that case I'd trigger each section in order.

Thanks @akapowl, you're right about that, I still haven't quite grasped how start and end works. I still have a lot to learn. Anyway, if you're willing to have a check on my web project, here it is, I know it's still too much but I don't think I can possibily make it simpler than that. https://codepen.io/luigi-basile/pen/gOjzKaB Thanks a lot for the support, that's really an awesome community.

Thanks Cassie, I'll try and simplify the code to show you in a pen. I'll keep you updated.

Cassie, that negative value was because I needed the animation starting a little bit before pinning the section which is triggered by a separate ScrollTrigger. The problem is that, activating the markers, the start positions of the lotties are not steady (hope it's the right term, english is not my first language), they sometimes shift to the bottom rendering the animation useless because it is already finished when you reach the lottie trigger.

I was thinking, could negative start positions cause that? For example, I have values like start: "0-=250%" Is it good or bad practice in scrolltrigger? Thanks

Thanks Cassie, I'll try doing some checks myself first and then post an updated version. As usual, thanks for your help.

Hi guys, unfortunately the ScrollTrigger.refresh(); solution is not working in my code. Unfortunately I can't post the whole code of my project here. Basically, in certain situations, when you refresh the page after having scrolled towards the end, sometimes the start position of the first two Lotties animations (yep, only those two) changes, making the scroll animation unusable. What else can be causing something like this? Should I post a more complex version of the code to give you a better idea? Let me know and thanks.