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.

Very cool, thanks a lot Cassie.

How embarassing Cassie, I didn't update the pen. I indeed defined the variables, using var a1 etc. but it didn't work, maybe because i didn't use let like you did but var instead? Thanks anyway, it works indeed.

Hi guys, I'm experimenting with an horizontal scroll section in one of my projects. I used one of the code in the examples given in the Scrolltrigger documentation and modified it a bit. Basically, the horizontal scroll triggers when a section with the class "horizontal" arrives. Everything works great. The problem I'm having is with the mobile version: how could I "destroy" scrolltrigger in smallest screens to stop the horizontal scroll and make the sections go one below the other? I tried with a CSS approach but I don't think it's the right approach. As usual, thanks for your help.

Hi Rodrigo, it's giving me an error. "a1 is not defined". Updated my pen. Thanks for your help. https://codepen.io/luigi-basile/pen/eYjeQaZ

Thanks Rodrigo, I'll give it a try. I was thinking, should I wrap all the gsap and scrolltrigger code in a function and execute it all after the animations has been loaded? Or do you think that a ScrollTrigger.refresh(); will be enough? Thanks!

Hello, I'm creating an html page with some panel sections that pin after changing backgrounds. While the section is pinned, the lottie animation plays for every panel. The problem I'm having is that sometimes, in a totally random way (more often after refreshing the page when you reach the bottom) the start position for the first Lottie animation changes and it plays too late. I'm really banging my head on this, I tried everything to solve the problem but I can't seem to find the solution. I know there are many scrolltrigger, lottie animations and other scrolltriggers for pinning, but I don't have any other choice for doing the stuff I need. Let me know if you have any ideas. Thank you for all your help.

Very interesting @GreenSock. I don't know why but I thought that using the same trigger for two different Scrolltriggers wasn't good practice. Thanks a lot.

Made some test, works good but i'd like to ask you some more questions: - Is it possibile to make the bgcolor animation start earlier, without changing the scrolltrigger start value? That's because that value works good for the pinning. - When you scroll back, I'd like to make the background change as soon as possibile, ideally before the text starts appearing onscreen. Is it possibile without changing the scrolltrigger start value here too? - Last question: can we make that the bgColor reverts to the previous section data-panel-bg attribute instead of setting an initial body Bg value? The Greensock codepen is still valid for these last request: https://codepen.io/GreenSock/pen/GRBEBWe

Thanks a lot for your inputs! I'll make some test and report you back, I like both solutions. The second one has the advantage of having the bg color as a data attribute which is very nice. Thanks again @GreenSock and @Rodrigo

Thanks a lot @GSAP Helper. I made a simplified pen of what I wanted to achieve, here it is: https://codepen.io/luigi-basile/pen/ExpXELE Let me know if that helps.