Abhishek Animates

Continued thread but different issue (Old Thread link) I'm trying to create a header or something which should be pinned from that section reaches the left of the screen to the section starts scrolling out of the screen. I tried pinning the header but and passed the horizontal scroll animation as containerAnimation , it's not getting pinned. What can I do in this case? Also I came to know that if I remove position: absolute; from .header-wrapper, it will break whole animation and even the scroll won't work. 🫥

Yes! Been there, Done that! 🤝 Thanks for the help guys! GSAP community is one of the best ones.

Hey Cassie! Thanks for helping out with this. I was really trying a total different approach. Before implementing the logic that is there in my question, I had achieved this effect with a TOTAL DIFFERENT APPROACH and now I'm realizing that it was very dumb. This was very smooth though, but was done using scrollTrigger's markers. This wouldn't work if turn the markers off. (very dumb) https://codepen.io/abhiishek-10/pen/ZEPQKZL But anyways, the solution you've provided is really awesome and perfect. Just tweaked a little and achieved what I wanted. Here's the link to my solution. Hope this helps other people ; ) https://codepen.io/abhiishek-10/pen/abMdWgV Thanks again Cassie. Appreciate your help.

I am trying to achieve this scrolling and band clicking effect: https://root-food.com/ I figured out the horizontal scrolling and band clicking. But both of them together aren't working. What I mean is, when I comment out the update() function, the click events of bands will work just fine and will get the related section into the viewport based on which band you click. Now when we keep the update() function, it won't throw any error and it won't even work. I think both of the scrollTo are conflicting. Please help with this.

Is there any way to achieve this effect without using splitText plugin?

That's exactly what I was trying to solve. Thank you so much!!!

Yes I've tried this method before what I've currently in my pen. But I actually want to find a way of linking lottie's progress to a certain section. For example, when section-2 reaches center of the screen, the lottie should've completed 25% of it's animation frames. And also I want this percentage value to be customizable according to which sections will come in viewport.

https://codepen.io/abhiishek-10/pen/XWyzZQW I am trying to map progress of my lottie with a certain section. When a section comes into view lottie progress should be 25%, then second section come and lottie progress should be 50% and so on. I tried but couldn't achieve the result I wanted. How can I keep the lottie pinned and still map progress with different sections??? Please Help ?