Jump to content
Search Community

Svg animation

Guest join_shailesh
Moderator Tag

Go to solution Solved by OSUblake,

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

Throw my hat in the ring,

 

Here is an example of another way of animating a SVG gradient using the GSAP stagger() method along with the GSAP cycle property.

 

See the Pen WraOVy by jonathan (@jonathan) on CodePen

 

If the element your animating is within a SVG <defs> element, then you must animate the attribute instead like Blake advised above.

 

You must animate the attributes instead of those elements inside <def>, and <symbol> tags. You can use the GSAP Attribute Plugin.

 

Here are some examples of animating SVG using the GSAP AttrPlugin.

 

My examples above uses the GSAP AttrPlugin to animate the SVG element within a SVG <defs> element. Normally GSAP will animate CSS, but in my example you will see that i wrap my attributes in a attr:{} object, to tell GSAP that the property is an attribute.

 

Resources:

GSAP stagger() cycle usage: http://greensock.com/gsap-1-18-0

GSAP staggerTo() method: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

GSAP AttrPlugin Docs: http://greensock.com/docs/#/HTML5/Plugins/AttrPlugin/

 

:)

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