Scale on scroll velocity (like the skew demo)

[charlescollective]

Hi again, I've linked the GSAP skew on scroll demo as a reference...

I'd like to test animating other properties reacting to the scroll velocity like scale, width, height, border-radius, rotation, opacity, etc. I wonder if there is a more straightforward approach to achieving this effect as GSAP has evolved over the years?

 

Thanks in advance.
Charles

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen

[GreenSock]

Not really - that's pretty straightforward. There are quite a few ways you could approach this. Is there something in particular that you find confusing/complicated? 

[charlescollective]

Is that a no to different properties or to a simpler method? I’m a newbie to js so I’ve been using basic timeline and scroll trigger animations hence me looking for an out of the box solution. If there’s no simpler method that’s fine but would love to be able to adjust the code to work with different properties like the ones mentioned above 

[GreenSock]

Yeah, here's an example that animates the scaleX, scaleY, and opacity: 

See the Pen rNbaXMG?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps.

[charlescollective]

That's really helpful thank you, I now understand how to use it