Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate SVG viewBox

Recommended Posts

I'm not sure what I'm doing wrong on my test SVG, but the viewBox attribute doesn't want to animate.


Setting the value works fine and the end value is correct, but the viewBox simply changes to the new value rather than animating to it.




It works perfectly using animate within the SVG:

See the Pen GJdBJw by PointC (@PointC) on CodePen

See the Pen XbqBmM by PointC (@PointC) on CodePen

Link to comment
Share on other sites



I'm not an SVG expert at all but perhaps this sample made by Jamie some time ago could help you a bit:


See the Pen axzBs by jamiejefferson (@jamiejefferson) on CodePen


As you can see Jamie set up an update callback to somehow apply the tweened values. Again I'm a fish out of the water in terms of SVG so I don't know if this could be the issue you have.

Link to comment
Share on other sites

Thanks Rodrigo - I'll have a look.


It just works so easily with CSS animate, I thought the attribute plug-in would be just as easy.

Link to comment
Share on other sites

I can totally see why you'd think that. The challenge is that it's a complex string value with 4 different numbers all jammed in there that must be animated independently and then smashed back into a single value and applied to the attribute. But don't worry - we're planning to release an update to AttrPlugin that should handle that complex stuff easily. If you'd like to get a preview, there's an uncompressed beta version of TweenMax (which includes AttrPlugin) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - swap that into your example codepen and it should work dandily. 

  • Like 4
Link to comment
Share on other sites

Thanks Jack - that is great news. Animating that viewBox is a powerful technique and I just can't use CSS animations ever again after getting hooked on GreenSock.  :-D  


Any idea on the official release date for the new TweenMax version? 

Link to comment
Share on other sites

Sorry, I don't have a specific release date I can give you right now. We're working to nail down a few other things before we're ready to launch. I hope to release it within the next few weeks. Probably not sooner than a week from now though, realistically.

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.