[How to properly disable ScrollTrigger and Observer instance when scrolling to the anchor link?]

@Rodrigo Thank you so much for your reply) Really appreciate it. I tried your solution and realised that I just can use scrollTo plugin instead of lenis scrollTo and it works even without need to disable observer and scrollTrigger. Yeah, I have a little bump, but it's okay.) 

[How to properly disable ScrollTrigger and Observer instance when scrolling to the anchor link?]

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! 😊

 

See the Pen bGyqLRy by iamruletik (@iamruletik) on CodePen

[How to sync horizontal and vertical scrolltriggers?]

6 hours ago, Rodrigo said:

Cool animation @iamruletik, really good job 👏

Thanks

[How to sync horizontal and vertical scrolltriggers?]

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

[How to sync horizontal and vertical scrolltriggers?]

@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.

[How to sync horizontal and vertical scrolltriggers?]

@mvaneijgen Thanks for the idea, I tried your approach for the animation and seems like it worked :)

See the Pen oNOYMoa by iamruletik (@iamruletik) on CodePen

[How to sync horizontal and vertical scrolltriggers?]

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?

See the Pen WNWQbve by iamruletik (@iamruletik) on CodePen

[How play next lottie animation after one is ended via scrolltrigger? (lottie helper function)]

@Rodrigo Thanks so much )

[How play next lottie animation after one is ended via scrolltrigger? (lottie helper function)]

@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?

[How play next lottie animation after one is ended via scrolltrigger? (lottie helper function)]

@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

See the Pen PoVWQvM by iamruletik (@iamruletik) on CodePen

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.

[How play next lottie animation after one is ended via scrolltrigger? (lottie helper function)]

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

See the Pen qBgRaXZ by iamruletik (@iamruletik) on CodePen

[how to continue animation onComplete, gsap stagger?]

@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

[how to continue animation onComplete, gsap stagger?]

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

[how to continue animation onComplete, gsap stagger?]

@mvaneijgen Hi again )
Thanks again for the direction, I recreated animation with your base and get this

See the Pen YzdxmVx by iamruletik (@iamruletik) on CodePen

[how to continue animation onComplete, gsap stagger?]

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

[how to continue animation onComplete, gsap stagger?]

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.

See the Pen MWZwMrR by iamruletik (@iamruletik) on CodePen

[gsap animations seems to end before it played to the end]

@Cassie thanks a lot ) with your code I was able to make what I needed and it was much simpler than my first attempt

See the Pen WNYBqVd by iamruletik (@iamruletik) on CodePen

[gsap animations seems to end before it played to the end]

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.

[gsap animations seems to end before it played to the end]

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

[gsap animations seems to end before it played to the end]

@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

[gsap animations seems to end before it played to the end]

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")

See the Pen MWzdZdW by iamruletik (@iamruletik) on CodePen

[gsap, how scrub through layers of divs using mouse position]

@mvaneijgen it's like bonus gift for birthday)

[gsap, how scrub through layers of divs using mouse position]

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

[gsap, how scrub through layers of divs using mouse position]

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?
 

See the Pen XWyZKoX by iamruletik (@iamruletik) on CodePen

[How sped up existing gsap animation on scroll using scrolltrigger]

@Rodrigo thank you very much for the help)