Jump to content


How to think to building SVG animation

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



This it's my first try with GSAP and I'd need your help to understand how should I think to solve the animation process.

I want to achieve

  1. Violet water drop falls down on black background
  2. Then letters start animating - For extra effect I would break "V" letter into two paths so both lines they can get animated simultaneous. 

My problems:

  1. My main problem is how to control timing and control visitability of these paths or groups via js 
  2. How can I hide cyan letters on the beginning and start with letters animation when the water drop falls into place?
    • In load animation part: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%"}, 2); 
      It seams I cant add delay parameter into the function like: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%", delay:"2"}, 2); 
  3. In on click function I don't understand why violet drop isn't animating.
  4. If possible I would first have
    • Violet water drop falls
    • V letter gets animated then this animation is taken to the next left and right letters so that whole "logo" is reveald. 


See the Pen qpvXaN by MattAV (@MattAV) on CodePen

Link to comment
Share on other sites

Hello @mikel

Many thanks for your help!

I was able to follow your syntax, but still i'm not comfortable with all the GSAP options and syntax.
I've added a few extra objects to the animations as I would like to take animation a little further.

I'm looking how to

1. Animate opacity of red circles without the need to use the property  y:300, so that all thing would be more smooth.


2. how to control the timing when specific red circle animation starts.  I would like that red circles start to animate (fade in) as soon as possible after below cyan letter is animating. Now red circles start to animate only after cyan letter animation is over and this creates blinking effect. 


See the Pen GyLpeN by MattAV (@MattAV) on CodePen


Link to comment
Share on other sites

Hi @Awmat,


1. Look at this part of the docs:



Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. 

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});
//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});


2. Please take a look at these explanations: https://greensock.com/position-parameter


And: try the GSdevtools  (more here) - its a great help.


Just a few modifications here:


See the Pen 0339939def417c7f778609bf6c30bc07 by mikeK (@mikeK) on CodePen


Happy tweening ...





  • Like 6
Link to comment
Share on other sites

Hey @mikel

Thanks for your help and links!

It's getting better, but still there are things I'm not able to fix.

1. I would like to hide blue dots at the beginning, so that there would be animating violet drop and then dots explode into position.
2. Is there a property to tween blue dots along the hidden arch line to the final position rather then in straight line as it is now?
3.  Is it possible to tween from the center out. I would use such approach with the plus sign at the right?


See the Pen yprVzO by MattAV (@MattAV) on CodePen


Link to comment
Share on other sites

Hi @Awmat,


step by step - looks good.


1. Use 'visibility:hidden' in CSS.


2. Watch 'Animate along on SVG path' (here).


3. In the DOCS you find:


So you could even animate a dash from one end of the path to the other, never changing size, like 

TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"})


Here some modifications:


See the Pen QaREby by mikeK (@mikeK) on CodePen


Happy tweening ...




  • Like 4
Link to comment
Share on other sites

Hi @mikel,

I've finished my first GreenSock animation. Its not perfect in all aspects, but I tried to tune it as much as possible. Thanks for your help!

Still one questions remain:

I want to turn this into gif animation and that's why I've added SVG2GIF script and all it does in my case is to render white rectangle. 

Are you familiar with this script?
i was checking this_ codepen.io/chrisgannon/pen/0e3f0e3af985e1c6949e70e4c8ed4df7


See the Pen oprxMe by MattAV (@MattAV) on CodePen


Link to comment
Share on other sites

Hi @Awmat,


I know the tool, but have no idea why it does not work.


Please ask @chrisgannon directly (here or on CodePen) if he can help.


Kind regards




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.