[Why my pin isn't working inside containerAnimation?]

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

See the Pen WNmrXgp by abhiishek-10 (@abhiishek-10) on CodePen

[How can add two ScrollTo instances on window?]

10 minutes ago, mvaneijgen said:

You'll probably find the solution you thought of is going to be useful in a year or so when you're working on a totally different project.

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

[How can add two ScrollTo instances on window?]

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)

See the Pen ZEPQKZL by abhiishek-10 (@abhiishek-10) on CodePen

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

See the Pen abMdWgV by abhiishek-10 (@abhiishek-10) on CodePen

Thanks again Cassie. Appreciate your help.

 

[How can add two ScrollTo instances on window?]

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.

See the Pen BabjaxL by abhiishek-10 (@abhiishek-10) on CodePen

[Scroll Trigger Text Reveal]

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

[Lottie animation in timeline]

9 minutes ago, GreenSock said:

That's a pretty customized thing - here's a quick attempt that might get you going in the right direction: 

 

 

 

I added a data-progress on each <div> to make it easy, and then populate a timeline according to the height ratios. 

 

If you need further customization, you're welcome to contact us about paid consulting services (it's a bit out of scope for these free forums). Good luck!

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

[Lottie animation in timeline]

11 hours ago, Rodrigo said:

Hi @Abhishek Animates,

 

Maybe something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

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.

[Lottie animation in timeline]

See the Pen XWyzZQW by abhiishek-10 (@abhiishek-10) on CodePen

 
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 🫠

[Kill scrolltriggers by ID]

On 5/16/2022 at 3:54 PM, Cassie said:

No - I wasn't suggesting you loop around to kill them. I was explaining that you're looping around and creating loads of scrollTriggers with the same ID.

 

Then you're trying to kill them using that ID value. The ID is singular. You can't assign multiple scrollTrigger to that ID.

You also have a delay value in your scrolltrigger object, that's not valid. You're also using different scrub values, and have start and end values stagered - were you trying to stagger the start times of each letter? You can do that in a timeline if so?

You likely just need one ScrollTriggered timeline - like this
 

 

 

 

can we also ".refresh()" a scrollTrigger the same way?