Jump to content


It's very strange behavior of animation on intitial animation and onHover event.

Go to solution Solved by Dipscom,

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

Hi there.

First of all I want to thank you for such a great animation platform as GSAP.

I am beginner in it, and I have some questions. 


I have a task to animate my card of product.

First it's just drawing a path of svg patterns.

Second  when onHover event is fired Iwant to put it up and put down them and drawing them in reverse direction simultaneously.

More you can see on codepen link.


I have done it, but when I call hover event in during the first animation, my svg path is cut.

Why? What's wrong with it? 


I pin screen of bug http://joxi.ru/82QMg35TGO9b2d

See the Pen MbLbEO?editors=1000 by MaxNikulin (@MaxNikulin) on CodePen

Link to comment
Share on other sites

Hi MaximusNikulin,


I'm not too hot with Babel as to be completely sure of what's going on and exactly how you are accomplishing things, one thing I think it could be the reason of this strange behaviour is that it appears ( to me ) that you are animating the strokeDashoffset in two different timelines.


As they are not connected, when you hover over while the first timeline is playing, the second timeline takes over and overwrites what values the first timeline was setting. I can't go check the exact length of your paths to see if the values are what the should be but I think what is happening here is that you are cutting the progress of the strokeDashoffset before it reaches its final amount if you hover over before the end of the first timeline. Then, the second timeline is working with the values registered at the moment you hover over.


As a test (this is what I did) change the duration of the first timeline, make it super slow and hover at different points in time, you will see that the stroke animation always gets cut at the point where you hovered over.


I think you will need to change how you have set your timelines or calculate the length of the strokes outside the timelines so that you have a fixed length to work with rather than a dynamic one that gets overwritten.

  • Like 3
Link to comment
Share on other sites

Thanks a lot for the answer. I was trying for couple of hours, and I have reached some hack. 

It would be great to get some explanations why that woks this way.

See the Pen QGYeXw by MaxNikulin (@MaxNikulin) on CodePen

Link to comment
Share on other sites

  • Solution

It's not that much of a hack.


I can tell you why it works that way, though. It's like what I said in the previous post, you have two timelines trying to control the same animation but no way for them to communicate between them.


This time, you are interrupting the first one as you were before but this time you are telling the second one to start at a particular point and end at a particular point. And also, this time, you are creating the second animation every time there is a hover over. It should still work without recreating it every time.


The ideal scenario here is for you to create one timeline for the first animation and another for the secondary animation then, a third master timeline that controls the other two.

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.