Jump to content
Search Community

SVG morphing based on scroll velocity

brands & beyond GmbH test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hey guys,

first, congrats for the 3.7 release. Absolutely smashing. ❤️

 

You´ve created this awesome demo of skewing elements based on the scrolling velocity (

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

).

 

This leads me to the idea, where a svg shape get´s morphed between 2 states (scroll up, scroll down) and bounces back to idle as soon as scrolling is stopped. The Idea is that the bending of a shape is forced by scroll velocity and resetted on scroll stop.

 

I´ve made a small demo for the basic behaviour of it. atm it uses timeouts to archive a similar effect. I´m wondering if the bending of the shape is looking more organic with scroll velocity instead of slow tweens and timeout. Any experience with that? :)

 

Greetings and thanks for reading,

Richard

 

 

 

 

See the Pen mdWoXvZ by rkxn (@rkxn) on CodePen

Link to comment
Share on other sites

Hi brands and beyond!

 

If you want springy, this pen might help you out. Just move your cursor over the path and watch it spring back. You could definitely hook that up the to velocity. 

 

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

 

Also, I would always recommend using delayedCall instead of setTimeout for animations. setTimeout isn't synced with gsap and rAF.  And with delayedCalls, you can pause, restart, and kill them!

 

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

let delayedCall = gsap.delayedCall(1, () => {
	// do something
}).pause();

// trigger it
delayedCall.restart(true);

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...