AlexLaforge
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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 originalskewY: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
Skew Scrolling effect based on speed
in GSAP
Posted
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 ^^ 😁