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

Guest join_shailesh
Posted

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 

suggestions

 

thnx...  

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

Posted

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? 

  • Solution
Posted

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
Posted

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
Posted

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

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