scrollMagic horizontal slide effect with Gsap

[Tyra Pululi]

How can I achive a slide effect like in this post but horizontally, for the horizontal scroll I am using as reference a Naila Ahmad codepen.

I am not sure what would be the best aproach.

Any guidelines would be appreciated

See the Pen RebLjj by tyra-pululi (@tyra-pululi) on CodePen.

[PointC]

The trick with ScrollMagic, a horizontal pin and tweens is using an offset. You can't set the normal triggers, but measuring the height of the window and using that as an offset should work well for you.

 

See the Pen vVBQzP by PointC (@PointC) on CodePen.

Happy tweening.

 

[Tyra Pululi]

Thanks for the reply. Your demo is and will be very helpful but I was looking for the push effect instead of the pinning, it's like i am not able to run the slide animation from start to end once the next or previous section is in the view port. 

[jgthewebman]

Did you ever figure this out? I'm having the same issue.

[ZachSaucier]

Hello @jgthewebman and welcome to the forums.

 

Maybe it'd be better to not use ScrollMagic and just use GSAP instead? The thread below has a great, pretty well tested slider you could use:

 

[elegantseagulls]

1 hour ago, ZachSaucier said:

Maybe it'd be better to not use ScrollMagic and just use GSAP instead?

Agreed with this.

However if you're stuck on SM, you can set your panel tweens to move through the entire view port starting and ending at half way, to avoid starting and ending off screen.

Took some sideways thinking to get around some of ScrollMagic's quirks, but:

 

See the Pen NWKMyam?editors=1010 by elegantseagulls (@elegantseagulls) on CodePen.