Using GSAP ScrollTrigger for Horizontal Scroll

[neonerve]

TBH i can't even get the codepen examples to work in Oxygen builder. Copying the JS, CSS and HTML into code blocks don't recreate codepen results.... and i have the library installed fyi. I'm just really stuggling with everything nevermind creating a codepen example of which i would just copy and paste the one at the top of this page

[neonerve]

I've checked all of the examples and none of them have 1 section / div with a variable width based on whatever it placed within it. 

 

I believe i'm trying to achieve a very basic use of GSAP but it doesn't seem to be working.

[Rodrigo]

Hi,

 

As mentioned without a demo is hard for us to offer any support.

 

I created the simplest demo I could think of in order to show you how this can be achieved:

See the Pen MWzeJow by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[neonerve]

See the Pen jOQrmbZ by Websi-Ltd (@Websi-Ltd) on CodePen

 

Thank you for this simple version - really helps.

 

First time using code pen - therefore i hope my edits save in the link above.

In the example the card is 500% wide which is what creates the scroll... but what about if the contents of the div makes it stretch instead of being set to 500%

[neonerve]

https://kokoro.mywebsi.co.uk/?page_id=2
For example here... I have a 400vw for .cardswrapper (which i don't want to have to define as it just squishes up the cards)

And also, once i reach the end of the wrapper it seems to need the user to scroll through another card full of white space?

 

Thank you for your help so far - much appreciated

[Rodrigo]

Hi,

 

I'm a bit lost here, the example I posted before can use as many elements as you want with a specific width for each element, not a width for the parent element and it doesn't have any extra space when you reach the end of the cards container. What exactly you want this to do? 🤷‍♂️

 

Happy Tweening!

[emr07]

On 8/1/2022 at 10:00 AM, Sanjeet M said:

Okay, thanks. So now I understood what the 'containerAnimation' does.

So this will not do anything in my project?

So is there any way this can be achieved using GSAP3 ScrollTrigger or is this a limitation?

I wanted to create something similar to this https://sarahfatmi.com/en

The above site is created using GSAP3, so what I am trying to achieve should technically be possible. I tried to see it's code but failed to understand it, as it's a bit too complicated.

Basically I want a long container having objects/elements (could be divs, images, svgs, videos etc) at various points in the long container and when they come into viewport they should animate based on the animation they are given. They should also reverse on scroll back (Basically 'scrub' behaviour). Similar to the linked site.

@Cassie Thanks for the answers.

Hello! I'm looking to solve the same thing, a horizontal scroll section in gsap that allows including different elements with different sizes. have you found a solution for that?

[GreenSock]

3 hours ago, emr07 said:

Hello! I'm looking to solve the same thing, a horizontal scroll section in gsap that allows including different elements with different sizes. have you found a solution for that?

You can definitely do that, or maybe I'm misunderstanding your goal. What have you tried so far? @Rodrigo included a demo above. Feel free to fork it and make any edits that you want, save it and post that URL back here to show us exactly what isn't working for you. It's just really difficult for us to answer your question without any context. 

[Rodrigo]

Hi @emr07,

 

Maybe this example can help:

See the Pen rNZdVdg by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!