iamruletik

Hello! Glad to be back on this great forum with new questions. Recently, I stumbled upon a problem with my animation. I'm trying to combine a few sections with simple scrub animations, but one section in the middle uses an observer to stop scrolling and animate through a few slides. I was using some of the forum's insights from posts about combining ScrollTrigger and Observer. However, my issue is that I'm using the Lenis library for smooth scrolling. Instead of manually stopping scrolling and saving its position, I just call lenis.stop() and lenis.start(), which works like a charm. But I have a few anchor links on my site, and when I use the lenis.scrollTo() function to scroll to the needed section, I encounter a problem. When I try to scroll to the footer, which is below the section using the observer, my scroll just stops. I thought, "Okay, just disable Observer and ScrollTrigger, and after scrolling, enable them again." This leads to my final problem. It works, but when Lenis scrolls to the footer and onComplete enables ScrollTrigger, the scroll position resets to the top of the site, and when I scroll, it resets back to the section that uses the observer. I made a simple CodePen to try to fix that issue, but I'm stuck. Please help me! 😊

Thanks

@mvaneijgen Sorry, found that there are "snap" attribute, that exactly what I need

@mvaneijgen Also wanted to know is there a way using ScrollTrigger to scroll to specific time in animation? I mean snapping to the sections, in my case snapping to words.

@mvaneijgen Thanks for the idea, I tried your approach for the animation and seems like it worked :) https://codepen.io/iamruletik/pen/oNOYMoa

Hello! Another day, another challenge. I'm trying to replicate simple version of this page scroll animation 큰그림컴퍼니 - Bigpicture company (bpco.kr) but can't figure out how to sync horizontal and vertical scrollables so that headline meet picture exactly at center. I thought if I gave both pins same distance in pixels it would work but in my interpretation it's not. Could you please point out what I'm doing wrong?

@Rodrigo Thanks so much )

@Rodrigo Also I have one more small question. Right now is kind of easy to add some text animation to the current timeline and run animation alongside the lottie. But I need to show on each lottie up to 4 blocks of text. One after another. Is there a way to add text animations in current timeline and run them alongside each lottie? I mean when one lottie is played, there is another timeline of 4 text blocks that are animated one after another, but the whole text timline runs alongside with first lottie animation. (kind of like what i did here https://coco-rad.webflow.io/) And now I think that I kind of answered this one myself haha. Can I just nest timlines in each other and run them alongside each lottie?

@Rodrigo Wow thanks a lot for giving this light setup. It gave me the direction on how to achieve what I need. I changed a little bit your pen and this is what I come up with https://codepen.io/iamruletik/pen/PoVWQvM What do you think? It kind of stupid because after each animation I hide it and i think that out there exist a better solution. It would be great to destroy animation and delete it from DOM just to free up the memory. But how then load it again inside the timeline? But maybe I'm wrong. Also I disabled pining because for some reason it gave me artifacts on lottie.

Hello everyone. Trying new things with the scrolltrigger. I get how to play lottie animation using scrolltrigger, mostly because of your great lottie helper. But I can't quite get how to play another lottie after one is done. So what basically I need is to when one lottie show last frame, i want to show the next animation so users would scroll it like one big animation. I made demo on codepen with first animation that works perfectly, but i don't know how to play second one https://uploads-ssl.webflow.com/65439ff2fe01591215aa20e4/6548fd41566d2b21f8075c8a_secondAnimation.json I thought of using timeline, but how to playback animations backwards when user is scrolling up and hook up animations to the same wrapper? Also I think put all animations in one big lottie but it would be pretty big because we use images for the blur effect and we use lots of it. So I thought that splitting them up good idea and also I would need to animate text over this background animation and I thought that splitting animations would help. P.S: So i've tried to add animations to the timeline but it doesn't worl for some reason

@mvaneijgenthank you) i mostly meant not the whole structure being centered, but particular card the whole animation is centered, but when I scroll cards, cards themselves placed closer to the bottom

one thing that i can't get is how to properly align items in the center

@mvaneijgen Hi again ) Thanks again for the direction, I recreated animation with your base and get this https://codepen.io/iamruletik/pen/YzdxmVx

@mvaneijgen thanks a lot ) i will try to redo animation with your input

Hi there ) I'm trying to replicate cool animation with perspective cards from https://qude.audio/ Video of animation I'm kind of replicated this animation in my codepen, but I can't quite grasp on to how make some subtle effects. Like in original animation when new card is in focus the old ones continues to animate. And how to change scale on each element incrementally? Like in referenced animation I want to each element become smaller than the next.

@Cassie thanks a lot ) with your code I was able to make what I needed and it was much simpler than my first attempt https://codepen.io/iamruletik/pen/WNYBqVd

I believe the issue might be arising due to the presence of three separate animations that control the same elements. When I hover over one link, the entire text should become invisible. However, when I hover over the next link, the same text should also become invisible. In reality, it seems that the text begins to regain opacity from the mouseleave animation, and then another animation promptly starts, affecting the same text and causing it to become invisible. Unfortunately, the previous animation doesn't even get a chance to complete before this new animation takes over.

And in my version this occurs when I leave hover over link (Whole text becames invisible)

@mvaneijgen Thanks for the answer ) But actually problem still exists When I hover over link and the hover the other, then first link became invisible. I think when I hover over next link gsap runs the animation but previous animation stops. And i don't know how to solve this

Hello guys ) Trying to create animation in which whenever you hover over the specific text everything else but text dissapears and video became visible on the background. But I run into some problem. If I hover only on one text block and the leave it then it's working properly. But when I'm trying hover over few text blocks then sometimes some elements either became invisible or partly visible. Like animation starts and abruptly ends. (Try to hover over "design and branding", "advertising", "web")

@mvaneijgen it's like bonus gift for birthday)

@Rodrigo wow, thanks a lot ) It's really more cleaner and defined solution )

Is there a way to replicate this cool animation from this website using Gsap? https://decimalstudios.com/ I kind of did it, but wonder is there a better way to do it?

@Rodrigo thank you very much for the help)

Hello again I have another one (maybe) dumb question, but I can't figure out how to sped up my existing gsap animation using scrolltrigger. I have emblem looping indefinetly around itself with one speed. And I want this emblem to go faster when I scroll down or up. Kind of giving it a push when scrolling. Is it possible? P.S: I have a sprite animation and I noticed that at the end of loop there one empty frame on each repeat. Why is that? I set up exactly 50 steps in script and I have exactly 50 sprites in my image.