Skew Scrolling effect based on speed

[AlexLaforge]

Hi,

 

I would like to achieve this type of effect using GSAP : animate the skewY property while scrolling :

 

 

My first attempt is below, but with the obvious problem that GSAP seems to ignore the duration property, and reverts to the original skewY:0rad almost instantly.

 

<div class="blocks-container">
	<div style="width:100px;height:100px">BOX A</div>
	<div style="width:100px;height:100px">BOX B</div>
	<div style="width:100px;height:100px">BOX C</div>
	<div style="width:100px;height:100px">BOX D</div>
</div>

var obs01 = Observer.create({
	target: 'blocks-container',
	type: "wheel,touch",
	onChange: function(self){
		//Compute the distortion
		var newRad = Math.round((self.velocityY/5000)*2, 2);
		//var newRad = Math.round((self.deltaY/1000)*2, 2);

		//Put limits on distortion
		if(newRad > 0.125){
			newRad = 0.125;
		}else if(newRad < -0.125){
			newRad = -0.125;
		}

		//Apply distortion that will (should) last 3 seconds to get back to the normal "skewY:0rad"
		gsap.fromTo('.blocks-container > div', {
			duration: 3,
			skewY: newRad+"rad",
		}, {
			ease: "sine.out",
			duration: 3,
			skewY: "0rad",
		});
	},
});

 

See the Pen yQrmeE by rauldronca (@rauldronca) on CodePen

[mvaneijgen]

Hi @AlexLaforge welcome to the forum!

 

Check out this demo from the ScrollTrigger demo page https://gsap.com/demos/?page=1&tags=ScrollTrigger Hope it helps and happy tweening! 

 

See the Pen eYpGLYL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[AlexLaforge]

Hi @mvaneijgen, thank you very much for your post : I'm ashamed not having seen this sample before, as this is exactly what I need... and it works like magic ^^ 😁

[mvaneijgen]

Ha, don't worry about it. We're going through a redesign on the site and somethings are easier to find then others, but it is getting there. Glad it helpt! Happy tweening! 

[Rodrigo]

14 hours ago, AlexLaforge said:

Hi @mvaneijgen, thank you very much for your post : I'm ashamed not having seen this sample before, as this is exactly what I need... and it works like magic ^^ 😁

Our docs are always the first place you should look into when you have any doubt, question or you're not sure how something can be achieved:

https://gsap.com/docs/v3/GSAP/

 

Not only we have a comprehensive explanation of GSAP's API there, but also you'll find the Learning Center link as well and a link to a large collection of how-to demos and starter templates:

https://gsap.com/demos?page=1

 

Happy Tweening!