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.
or
- 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,
Tom
