Jump to content
Search Community

Sequencing one SVG element's animations

Thomas Morgan 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

Hello all,


I'm new to GSAP, however, I think it's fantastic and will add more life to my front-end projects.


I'm trying to animate an SVG with sequencing. My ambition is to move the SVG from it's starting position (the very left a 960px width Bootstrap 'container') to the centre of the container. I managed to animate the SVG so that it moves by 50%, however, it treats the very left edge of the SVG as the centre point, and therefore is off-centre and is slightly to the right..


The SVG is a fixed width, so I had an idea for the SVG to 'bounce' back to the left by half of the SVG's width so that it would position itself in the middle on all screen sizes.


I tried using TimelineLite to sequence this behaviour, but only the first animation runs. Would anyone be able to help?


Summary of requirements:


- To move the SVG to the very centre of the 960px Bootstrap container with one animation.




- To move the SVG to the very centre of the container by moving it right by 50% and 'bouncing' it back by half the width of the SVG, with two animations.


Thanks in advance,





See the Pen aVWWeO by Thomas_Morgan (@Thomas_Morgan) on CodePen

Link to comment
Share on other sites

About second animation not running, it is because element already has left property set so browser ignores right property. Can you post a demo of what you are doing?


Because in current situation, your only option is to animate x transform with GSAP so second animation can run. But because you are using combination of to and from tween on same element it is going to effect your first animation which makes sense otherwise element will have to jump from center to right and then animate back.


See the Pen LOyLWW?editors=1010 by Sahil89 (@Sahil89) on CodePen


  • Like 2
Link to comment
Share on other sites

There are several different ways to workaround animating properties like top, left, bottom, and right. The easiest is probably to just position your element in its end state, and then animate to it using transforms like x and y. That will allow you to use responsive units, like left: 50%, but without any performance penalties.


See the Pen GOmGem by osublake (@osublake) on CodePen


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