Jump to content
Search Community

Learning SVG animation

kempo test
Moderator Tag

Go to solution Solved by Carl,

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



I want to get into SVG animation, I've been making banners with TweenMax / Light for a while.


I have a new banner to make, I could do it all without SVG but thought it might be a good to use it as a way to learn SVG animation.


First off, here is the storyboard for the part of the animation that I'd build.




The yellow line starts from nothing, comes across the banner from the left at an angle then opens up to reveal the blue panel with yellow top and bottom borders.


Basically I'd like to know where to start, what tools I should use and if this animation is suited to SVG animation.


Also, any pointers to good learning resources would be a bonus!



Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


For animating the lines I would suggest our DrawSVGPlugin: http://greensock.com/drawSVG

It is for Club GreenSock members, but you can try it for free on CodePen


For the other effect of the blue section opening up and revealing more content, do some research on SVG masks.

Here is a very basic demo from our man PointC: http://codepen.io/PointC/pen/KzmXYK

  • Like 4
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.
  • Create New...