Jump to content

Guest join_shailesh

Svg animation

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

hello friend ,


in above codepe link it shows blinking light animation it work on google chrome but not in mozilla firefox so please check and give 




See the Pen xZQGGd by shailesh_1299 (@shailesh_1299) on CodePen

Link to comment
Share on other sites

It looks like that animation is using CSS animations, not GSAP. This forum is dedicated to GSAP solutions. Are you asking how to do that with GSAP? 

Link to comment
Share on other sites

  • Solution

Love it  :lol:


Yes Superhero


Animating between two different gradients in a def can become complicated if the number of elements and/or attributes don't match, but what you have is ok. For the filter, you animate the stdDeviation attribute.


See the Pen ?editors=0010 by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

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.



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

Animating a gradient like you did with the inline values is a much better approach than parsing the values from another element/def.

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