Jump to content
Search Community

Don't forget about SVG Tweening

Randall test
Moderator Tag

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

Simple HTML5 example that tweens embedded SVG graphics.

tween_svg_example.zip

<embed id="svgBoard" src="board.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" />
<embed id="svgPeopleRight" src="people_right.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" />
<embed id="svgPeopleLeft" src="people_left.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" />
<embed id="svgText" src="text.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" />
<script>
 function $(id){ return document.getElementById(id); }
 TweenMax.from( $('svgBoard'), 2, { delay:1, css:{top:-300}, ease:Expo.easeInOut } );
 TweenMax.from( $('svgPeopleRight'), 1, { delay:2, css:{autoAlpha:0} } );
 TweenMax.from( $('svgPeopleLeft'), 2, { delay:3, css:{left:-350}, ease:Strong.easeOut } );
 TweenMax.from( $('svgText'), 2, { delay:5, css:{autoAlpha:0} } );
</script>

Link to comment
Share on other sites

Thanks again Randall, I rarely consider svg mostly due to lack of IE support. its amazing what can be done though in "modern" browsers. Lots of folks have been talking about raphael.js as the best way to handle svg. I really appreciated seeing this approach that didn't rely on any additional frameworks. very cool.

-c

  • Like 1
Link to comment
Share on other sites

Yeah, thanks, I've been using the free software Inkscape http://inkscape.org/ to experiment with creating SVG graphics. Being that .svg files are pure XML, they can be sent GZipped from the server and are extremely small in file size compared to PNG/JPG, while providing scalable crisp vector output and clean edges to shapes and text.

 

With canvas and SVG, we are getting much closer to simulating Flash-like animations with shapes and images.

Link to comment
Share on other sites

  • 2 months later...

Recently wrote down an article/tutorial about simple animation of SVG graphics and SVG injection.

I really believe that with the retina displays and the need for high quality graphics is going to give a boost to SVG rendering and manipulation.

 

You can check my blog post here: http://nightlycoding.com/index.php/2012/10/animating-properties-of-injected-svg-elements-with-tweenmax/

  • Like 1
Link to comment
Share on other sites

Hi Michael,

 

Thanks for informing us of your tutorial.

The concepts are very clearly explained and well-suited for someone new to SVG (like me) :)

Furthermore I really appreciate that you chose to use very simple shapes and animations as to not "scare folks away" with code that appears overly complicated.

I'm sure we will be able to recommend this as a starting point for people interested in GSAP JS + SVG.

 

It would be really cool to see what a more graphically intense (larger with more items) implementation would look like. I really think your current tutorial lays the groundwork for lots of cool stuff.

 

Thanks so much for taking the time to share your GSAP knowledge with the community. Its really super.

 

Best,

 

Carl

  • Like 1
Link to comment
Share on other sites

Thank you Carl, I'm happy to showcase my findings, and I hope these can be useful to someone.

 

As for an advanced/complicated example, I'm working on a JQuery plugin that will include PreloadJS, TweenMax, and SVGs

 

I'll post here some initial work that shows how someone can manipulate multiple static SVG elements into one smooth animation.

 

In the link below there is a file called ImgPlus.js that includes a "huge" string that is inserted into the DOM and declares several SVG elements that are something like a sprite but for a loader graphic. And with the help of the GSAP JS (specifically TimelineMax) I managed to combine them into one animation that shows until the images are loaded.

 

http://netgfx.com/trunk/imgplus/

 

Of course its still a work in progress but should be useful if someone wants to see how to animate some SVG elements sequentially.

 

Let me know what you think

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

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