Jump to content
Search Community

Responsive SVG's in Timeline

gilesht test
Moderator Tag

Go to solution Solved by PointC,

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

Hi - pleasure to meet you all.


My first post but have been getting to know GS over the past few weeks and love it. However now I'm getting stuck. I've been trying to figure out how to make responsive SVG timelines - i.e. set SVG timeline "keyframes" in % such that (e.g.) left:100% will always be at  screen right, regardless of screen size.


Worked my way through your trail here (http://greensock.com/forums/tags/forums/responsive/) but I'm missing something. As a newbie I'm finding some of the examples a little too confusing to work out so I've created an example of what i'm trying to understand .... I'd like to substitute the X & Y values in the codepen for % along the lines of


tl.to(cssCircle, 1, {left:100%})
  .to(cssCircle, 1, {top:100%})
  .to(cssCircle, 1, {left:0})

  .to(cssCircle, 1, {top:0}); 


Many thanks

See the Pen vKmBQB by gilesht (@gilesht) on CodePen

Link to comment
Share on other sites

  • Solution

Hi gilesht :)


Welcome to the GreenSock forums.


The x and y is going to be relative to the SVG rather than screen size. Unless you tell it otherwise, the SVG will stretch out to 100% of the available width. In your example, you're setting the width to 600 and the height to 207, but try this: remove the width and height from the SVG and change the window size. You'll see that the SVG will shrink and grow to 100%, but your animation will still play perfectly at any window width. 


I made a CodePen as an answer to another question a few months ago, but it could also be helpful here. It has the same SVG displayed three times at different sizes, but the same x/y animation plays in all three and the positioning is correct at each size.


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


Hopefully that helps a bit.


Happy tweening and welcome aboard.


  • Like 6
Link to comment
Share on other sites

And by the way, you can use getBBox() on an SVG element to get its bounding box measurements. So, for example, if you're trying to figure out what 100% would be, you could do yourRect.getBBox().width. That's the un-transformed measurement, by the way. 


Happy tweening!

  • Like 1
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...