Hi,
I would like to achieve this type of effect using GSAP : animate the skewY property while scrolling :
https://codepen.io/rauldronca/pen/yQrmeE
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",
});
},
});