[Horizontal Scroll with Sticky Panels Effect]

16 hours ago, mvaneijgen said:

Yep that is why I'm not a fan of the current setup you have. It is much easier to start with a timeline and just add all the animations to that timeline and then hook that timeline to ScrollTrigger. I strongly recommend taking look a the post I've provided. It walks you to the process how you can make any card stacking animation, even yours!

 

 

 

The issue with the current setup is that everything needs to have a strict duration otherwise things will not line up anymore, but the things you want a .panel can have like 10 animations and if you want to hack that in your current setup you have to change the whole logic just to implement that one specific thing. If you start with one timeline and just put all the animations on that timeline with one ScrollTrigger you can do what ever you want you could even restructure the whole animation half way trough and it would still all perfectly line up.

 

Take this example. Hope it helps and happy tweening! 

 

 

 

You are right, I am trying to write like you
I want the photos to be displayed as clipPath when entering each slide
See this example
https://chryslerbuilding1930.com/
You can write like this with an example

[Horizontal Scroll with Sticky Panels Effect]

21 hours ago, mvaneijgen said:

Hi @mey3am I don't know what all the calculations where doing in the xPercent and duration, when removing those the fifth panel came back. 

 

Personally I'm more a fan of creating an animation and setting that up to scroll, I've written a guide that walks you through a setup of creating a 'stacking card' effect which this could be. So if you're interested here is the link. 

 

Hope it helps and happy tweening! 

 

 

 

 

 

thank you very much
Now I added an image and used clipPath.
But clipPath animation doesn't work in (.panel)
I want to display the image with clipPath with scrolling animation.
Of course, I want the clipPath to work when the scrolling starts and also return to the previous state when the scrolling animation returns.

 

See the Pen gOEKQYp by meysamrad (@meysamrad) on CodePen

[Horizontal Scroll with Sticky Panels Effect]

On 2/6/2024 at 10:44 AM, mey3am said:

thank you

I changed the panel to width: 100%;
But it does not display the last slide or panel

See the Pen gOEKQYp by meysamrad (@meysamrad) on CodePen

[Horizontal Scroll with Sticky Panels Effect]

9 minutes ago, GreenSock said:

You mean the transform origin? 

transformOrigin: "right center"

 

 

thank you

[Horizontal Scroll with Sticky Panels Effect]

1 hour ago, GreenSock said:

Are you trying to do something like this?: 

 

 

yes thank you
But I want to start the zoom not from the center, but from the right:
start: "right right",
That is correct ?

[Horizontal Scroll with Sticky Panels Effect]

Hello, how is this example written with rtl?
body, html {
     direction: rtl;
}
Because it doesn't work with rtl
And the photo cannot be zoomed with scale

 

See the Pen gOEKQYp by meysamrad (@meysamrad) on CodePen