Jump to content
GreenSock

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

Move from center to bounds egal with distance

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

Hey guys how i can tween elements from a center to extent egal distance to bounds elements ?

Any pro type, i don't like the way i perform, do tween have some special solution or method to do this in optimal performance?
In this example i just want do this but in better way.
Move all sprite from center to bounds in egal distance!
plz see line 18:


Thanks in advance.

See the Pen ExYGryo by djmisterjon (@djmisterjon) on CodePen

Link to comment
Share on other sites

Hey Jon,

 

One way to do this would be as follows. There might be a better way to get the bunny's width, I'm not sure as I don't use Pixi.js much.

 

Make sure to set the initial rotation when you create each bunny like I did in the pen below.

 

let bunnyWidth = Bunnys[0].width;
TweenLite.to(Bunnys, 1, {x: function(index, elem) {
  return (index - (Bunnys.length - 1) / 2) * bunnyWidth;
}, rotation: 0, ease: Power4.easeOut} );

See the Pen dybaPWR?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

nice , i completely forget we can pass function, thanks for the tips , i love it.

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