scrollto How can add two ScrollTo instances on window?

[Abhishek Animates]

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

[Cassie]

Hi there!

 

I would actually approach this completely differently. We have a feature called containerAnimation that makes horizontal scroll effects like this REALLY easy.

 

 

Here's a little demo. My maths is a bit rushed and bodged together, so if I were you I'd go through and refine this a little.

See the Pen MWxKKrL?editors=1011 by GreenSock (@GreenSock) on CodePen

I've kept the individual tweens for the bars seperate so you can see how each of them differ with the start and end points, but this could also be abstracted away nicely into a loop.

Hope this helps! Fun challenge!

 

[Abhishek Animates]

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.

 

[mvaneijgen]

Glad you solved the issue! 

2 hours ago, Abhishek Animates said:

I had achieved this effect with a TOTAL DIFFERENT APPROACH and now I'm realizing that it was very dumb.

I wouldn't say it was "very dumb", the beauty of GSAP is that you can come to a solution from different angles and one isn't always the 'better' one. Also it takes me around 10 versions to find the desired effect I'm looking for, but that doesn't mean the 9 other versions are a waste. 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. Again glad your issue is solved and happy tweening!

[Abhishek Animates]

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.