iamruletik

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