Jump to content
GreenSock

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

StaggerTo from a single origin

Recommended Posts

Hi, before I start just wanted to say GSAP ROCKS! I use it pretty regularly but am always keen to learn new techniques and tricks.

 

I am using a staggerFrom tween to move 20 objects (svg's) across the viewbox, but I want them all to animate from a single point of origin, is there a quick way to do this.

 

I could animate them individually in a timeline, setting the From origin for each object, but I wanted to take advantage of the easing I could apply to a stagger tween.

 

I was wondering if there was a way of passing origin coordinates specifically relating to the viewbox? 

Alternatively can I pass an array to the staggerFrom for the individual points of origin for each object?

 

 

I have included a codepen.

I really want the objects to animate from a single point on/behind the coin. Also perhaps you'll be able shed some light on why my coin flip animation has stopped working when I migrated it to codepen, (I don't do much on Codepen)

 

Thank you in advance.

See the Pen gqaVeJ by AlexFarminer (@AlexFarminer) on CodePen

Link to comment
Share on other sites

Hi @OODNX,

 

"to animate from a single point of origin": using staggerTo  you can define an array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}).

 

Here used to set the persons (row 01) to an common point:

 

 

See the Pen daGpZK by mikeK (@mikeK) on CodePen

 

The SVG spec does not support 3D transforms. You can try wrapping your SVG in a containing div and rotating that.

 

See the Pen PVZNVW by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

  • Like 2
Link to comment
Share on other sites

Excellent, you are, as your profiles suggest, superheros!

 

Thank you

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