jcdev

@akapowl Works perfect, thank you so much! I just signed up for the newsletter, so hopefully I can catch the next solution beforehand. Appreciate your help!

Hey all, I'm back with another question! I'm having a bit of a spacing issue when using multiple animations here. The first animation executes perfectly, but the second one is coming in a bit early here (really early on the production page I'm working on). I've read through the docs in regards to pinning, and I've tried using different end values with no luck. Any help is appreciated, thanks! 2X lottie animation

Ahh ok, got it. Thanks for the explanation! ?

Man, you guys are amazing. Yeah, that's exactly what I was going for, thank you so much. One question though - the target is set to start at "center center" - which makes sense as it fires right where it's supposed to, but in the LottieScrollTrigger function the "st" variable is set to start at "top top". What exactly is happening there? Again, thank you. I really appreciate you taking the time!!

Hi! I'm trying to create something similar to the question above. In my example, I'd like all elements to remain pinned while the scroll animation takes place, then un-pin upon completion. Currently, the lottie will only animate if I pin the parent container. If I pin the main container for the project, that achieves the pin behavior that I'm looking for, but the lottie doesn't animate. I'm relatively new to this, so apologies if this is a ScrollLottie question and not a ScrollTrigger question. Thanks in advance! https://codepen.io/cefaijustin/pen/mdWdgOm

Hello, I've been working at this for a while and can't seem to sort out the issue. I have a two column grid with side by side images. Within that container, I have an element (initially positioned absolute and out of view) that slides up on scroll, and the text above it slides up as well. As these elements slide up, the start marker for the next scroll trigger that I'm trying to animate below it slides up as well instead of staying fixed to the top of the image. At this point, the start marker for the next scroll trigger is roughly 540px above where it should be. Once it reaches the starting point, the page jumps back up to the original pinned content and scrolls the desired 700px. I apologize for not including a codepen, and I know that it's hard to accurately diagnose the problem without seeing all of the code, but I guess I'm just looking for a more general answer on how / why this issue would happen. Below are the three scroll triggers in question. Thanks in advance. gsap.to(".ss1-copy-initial", { y: -80, scrollTrigger: { trigger: ".ss1-img1", start: "top 15%", end: "bottom center", scrub: true, toggleActions: "restart none none none", pin: ".journal-container", pinSpacing: true, markers: true, }, }); gsap.to(".ss1-slide", { y: -530, scrollTrigger: { trigger: ".ss1-img1", start: "top 15%", end: "bottom center", scrub: true, toggleActions: "restart none none none", pin: ".journal-container", pinSpacing: true, markers: true, }, }); // SCROLL SECTION 2 gsap.to(".ss2-copy-left-slide", { y: -700, scrollTrigger: { trigger: ".scroll-section__2", start: "top 15%", end: "bottom center", scrub: true, toggleActions: "restart none none none", pin: ".journal-container", markers: true, pinSpacing: true, }, });