issues reversing tween

[greykrav]

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

[Sahil]

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

 

[greykrav]

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