Applying transform animation on elements

[Amini 4 Likes (Newbie)]

We're planning on using ScrollTriger in gsap to apply transform in our website. We have some cards which are being transformed. We want these cards to be scrolled to the end horizontally and after the scroll is finished (the last card shows up), so the page scroll moves to the next section and vice versa. We couldn't find a useful resource to apply this and no one knows gsap here. You can find a better example on this website at the bottom of the page which the class name for the cards is .item-extension.

While you're reviewing this question, we will be seeking the answer. Thanks in advance

[akapowl 5,482 Likes (Superhero)]

4 hours ago, Amini said:

We couldn't find a useful resource to apply this

 

You'll find a couple of examples on the ScrollTrigger demos page and in GreenSock's collections (ScrollTrigger Showcase and ScrollTrigger How-To Pens) over on codepen, and dozens more when you search the forum for something like "fake-horizontal" or even just "horizontal".

 

Here are just some of those

 

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

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen

 

 

 

If you also want to trigger things when the individual elements that are layed out horizontally come into view or pass a certain point in the viewport, you'll want to have a look at containerAnimation

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

 

 

And while the examples in the thread linked below still use an older technique of triggering animations on the individual elements, maybe it can serve as a starting point for figuring out what would be important for when your layout is not starting on the left side of the window, like it looks to be the case with what you want. 

 

Welcome to the GSAP forum - and happy tweening!

 

 

 

 

[Amini 4 Likes (Newbie)]

@akapowl I really appreciate. These were exactly what we wanted.