Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
greykrav

issues reversing tween

Recommended Posts

Good evening everyone. 

I am having problems getting this function to run repeatedly, I wish it to run every time on mouseenter and reset itself on mouseleave, however its only running once. 

Also I was looking for tips on how to achieve the GOOEY morphs I see everyone doing, as well as the water ripple morphs seen in this

See the Pen NqZPwd by jonathan (@jonathan) on CodePen

All advice and tips welcome. Thank you. 

See the Pen wQyjBj by kravmaguy (@kravmaguy) on CodePen

Link to comment
Share on other sites

You need to create paused timeline outside of events so you can play and reverse it on mouseenter and mouseleave.

 

See the Pen VVQGgQ?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

For gooey effect you need to use blur and contrast trick, check this https://www.youtube.com/watch?v=ZDFwBEXN0pM

 

The ripple effect is SVG filters, feTurbulence specifically,

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence

 

  • Like 3
Link to comment
Share on other sites

Thank you for the solution and all the helpful information! I am researching the methods you recommended right now. 

 

I have run into some other questions about morph so ill make a new thread..

  • Like 1
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.
×