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!

[AbduakhadKuyliyev]

On 3/13/2023 at 4:49 PM, Cassie said:

Hey there -

 

These demos are set up to achieve a certain effect, so just adjusting the markup like this isn't going to work. You'll have to adjust how the CSS is styling the elements and also the logic surrounding the tweening.

Here's a start for you, I adjusted the sizing of the last container so that it doesn't collapse in a flex container and also changed the amount each panel was moving - hope it helps!
 

 

 

[CamiMarie]

Hello!

 

I am a total beginner and pretty sure this is a super basic question (apologies!), essentially I have directly copied a demo previously made in this thread which I have saved as my own (below). I don't need to alter the code except to change the image which is currently a random unsplash url. How do I change this to a media file uploaded to my wordpress gallery (elementor)?
 

I have already tried directly renaming the url in the code below with the url provided in wordpress for the specific image I want to use but that didn't work...

 

I don't quite understand how the ScrollTrigger code works in itself so have been deleting / renaming stuff randomly but sadly have not figured it out... @Rodrigo eternally grateful for any help you can provide!

See the Pen eYaYqWw by CamiMarie (@CamiMarie) on CodePen

 

muchas gracias

[Rodrigo]

Hi @CamiMarie and welcome to the GSAP Forums!

 

I'm very far from being an experienced wordpress developer, in fact I know very little about it, so I couldn't really tell you what to do. Maybe if you have access to the template create a unique id or class that you can use as a selector in your code.

 

Sorry I can't be of more assistance.

Happy Tweening!