Jump to content


issues reversing tween

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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,




  • 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.