Scrolling effect like this

[Super Indigo]

Hey guys!

 

I was wondering how I could achieve an effect like this http://vanderlanth.io/  

  

I like both the physics and the sequential easing of each text row.  

  

Thanks in advance

[ZachSaucier]

Hey Super Indigo and welcome to the GreenSock forums!

 

This sort of thing is perfect for canvas. You can paint the photo to the canvas, rotating it and moving it over time and using a partially opaque rectangle with a white fill to give it the "fading". GSAP can help with the animation and the modifiers plugin can help you keep it in the bounds of the screen. 

 

Is that enough to help you get started? 

[Super Indigo]

Oh I am not interested in the hover effects. Just the general scrolling effect how it has inertia and stuff like that.

[ZachSaucier]

Ah, I see. 

 

The rotation is easily done by applying a skew based on how fast the user is scrolling. The reveals can be done using an intersection observer. 

[Super Indigo]

Thank you! I'll give it a try. I found this 

See the Pen EEJObv by grmnn (@grmnn) on CodePen

 as well