Most of the modern websites use moving animations to make the site more attractive. Every major browser offers excellent support for displaying SVG graphics doesn’t mean that animating them is easy or consistent. Some browsers don’t support CSS animations on SVG elements. Some don’t recognize CSS transforms (rotation, scale, etc.), and implementation of transform-origin is a mess.
This QuickTip focuses on creating staggered animations on multiple objects with TweenMax’s power methods staggerFrom() and staggerTo(). TweenMax’s stagger methods, tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.
Steps :
1. Include the js files TweenMax.min.js, jquery.min.js in the header section
2. Add a class name to each SVG elements
3. include the following script in the footer
Here “logo-part-one” is the class name added for one of the element in svg.
4. We can change the attributes of the function staggerFrom() and staggerTo() based on the animation we needed.
u