Jump to content
Search Community

Animate SVG viewBox

PointC 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

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

Hi,

 

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

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

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