Pinned one-page scroll

[Grim95]

Hello everyone.

 

First of all, congratz on this library of awesomeness. I can't describe how thrilled i am to start learning how to use GSAP.

On our topic now, i've been looking for tutorials on how to create a pinned one-section/page that changes images and text on scrollmove

 

Here's an example of what i mean: http://anml.com/

 

I've done some tweening but can't find any codepens on how to pin the section in order not to move at all, any ideas ? 

 

Thanks for your time,

Grim95

[ZachSaucier]

Hey Grim95 and welcome to the GreenSock forums. ScrollTrigger can be used for this sort of thing.

 

Here's one of the examples from the ScrollTrigger docs that similar (a different animation but the effect is pretty much the same):

See the Pen 3cae4150fdefb9311148db6e7ab77ff1 by GreenSock (@GreenSock) on CodePen

[Grim95]

Thanks for your fast reply Zach, i'll study this pen and post for my results. 

The only limitation and time consuming thing is that i use WordPress so it'll take more time to adjust this in WP, i guess.

 

Thanks again.