Right to left sticky scroll

[lagalga]

Hi! i want a horizontal scrolling section with sticky cards moving right to left… but then another section with the reverse movement…

I reached to this page:

Where there is the first part, but cannot set the next section with the opposite direction movement… I've tried setting flex-direction:row-reverse, but cannot find what i need to change on the xPercent var…

See the Pen OJrvKML by lagalga (@lagalga) on CodePen

[mvaneijgen]

Hi @lagalga welcome to the forum!

 

It seems pretty the opposite to me in your pen? Or do you want the animation in reverse? 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've removed your first section and disabled ScrollTrigger and instead of .to() I used a .from() tween. I've enabled GSDevTools, so we can control the animation manually to see what it is doing. With this I would just tweak your animation till it suits your needs and only then enable ScrollTrigger again. Hope it helps and happy tweening! 

 

See the Pen MWZGgpP?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Sidenote, you don't really need to declare the matchMedia() twice, you can just use it once and put all your logic in there. 

[lagalga]

Thnk you, @mvaneijgen, but in my codepen the effect is right. Maybe with duplicated code. Sorry i don't fully understad yet all gsap settings, it's while trying when i'm learning 😅.

I'm setting this for a wordpress site, with Divi, and i've reached this: https://temp.espaciotramo.com/prueba-home/

And updated the codepen: 

[mvaneijgen]

44 minutes ago, lagalga said:

but in my codepen the effect is right

That is what I thought, so then I don't get what is the issue?

 

44 minutes ago, lagalga said:

Sorry i don't fully understad yet all gsap settings, it's while trying when i'm learning

That is not a problem, but what I don't understand is if you have a pen that works perfectly, what do you need help with? Is there a Divi issue? That is not really something we can help with, if it works perfectly in Codepen then it isn't a GSAP issue and we like to scope these forums to only GSAP related questions, so the only advise I could give you is try disabling things on the Divi side until things start working, then you know in what code the issue resides and it will be easier to debug.

 

But your links seems to also work and you've marked your comment as the solution? 

[lagalga]

9 minutes ago, mvaneijgen said:

That is what I thought, so then I don't get what is the issue?

 

That is not a problem, but what I don't understand is if you have a pen that works perfectly, what do you need help with? Is there a Divi issue? That is not really something we can help with, if it works perfectly in Codepen then it isn't a GSAP issue and we like to scope these forums to only GSAP related questions, so the only advise I could give you is try disabling things on the Divi side until things start working, then you know in what code the issue resides and it will be easier to debug.

 

But your links seems to also work and you've marked your comment as the solution? 

Sorry, I solved it while writing it. That's why I marked it as solved. I've been updating CodePen and that's why it looks good. 
Sorry for the inconvenience

[mvaneijgen]

No problem at all, happy you've found a fix! Keep on tweening! 

[lagalga]

Hi, it's me again. I thought I had solved... but it doesn't work on mobile. Also, the 40% section is getting "shorter" because above comes the 3rd section more and more above ....
I have created variables for .panel60 and .panel40 but I don't know if I should create a function for each of them?

Also, in mobile, they should be all full width sections, but the third section is not visible, it only does the scroll trigger with the .panel60 and .panel40 sections....

What am I doing wrong?

 

Updated Codepen:

https://codepen.io/lagalga/pen/OJrvKML

 

 

 

I have this on a wordpress site, with Divi theme:
https://temp.espaciotramo.com/

 

[Rodrigo]

Hi,

 

I think the issue here is in the way your HTML and CSS is setup more than anything. Your sections are 100% width in smaller screens so you want to move them in a different way.

 

This is exactly what GSAP MatchMedia was made for:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!