Jump to content
Search Community

Animate to Animating Element

uiguy 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

Hey all,

 

Working on a project where i need one element to fall onto another moving element.  Because its in motion i cant simply use its X/Y coords.

 

I was hoping there's some hidden gem that I can plug in to have it seek that out.

 

Thanks!

See the Pen xWJdLo by mrtips (@mrtips) on CodePen

Link to comment
Share on other sites

Well, you *can* get the x/y of the tweening element at any time in the tween. Craft your timeline in a paused state ... use .progress() to position the playhead at a specific point after your initial tween is defined. Then retrieve the top/left at that point to use as the values in your second tween. Finally, play the tween from 0.

 

See the Pen rdrmRE by sgorneau (@sgorneau) on CodePen

 

  • Like 7
Link to comment
Share on other sites

Hi @mrtips :)

 

I'm not sure what your final project will be doing, but here's a slightly different take on your request. By using Draggable's endX and endY I have one div chase another after you throw the first one.

 

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

 

I'm not sure if that'll be helpful for what you're doing, but thought I'd throw it out there as an option. Since you're a Club GreenSock member (thank you), you also have access to the ThrowProps plugin which has a cool velocity tracker if that is part of your master vision. More info:

 

https://greensock.com/docs/Plugins/ThrowPropsPlugin

https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.getVelocity()

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 7
Link to comment
Share on other sites

Great examples, guys!

 

Here is another approach from @OSUblake using the ModifiersPlugin which isn't necessarily simple, but it is dynamic.

 

See the Pen RRLxwN?editors=0010 by osublake (@osublake) on CodePen

 

Blake's ModifiersPlugin collection: https://codepen.io/collection/AWxOyk/

 

more on ModifiersPlugin: https://greensock.com/modifiersPlugin

 

If you're animation is canned, as you say, Shaun's solution should work very well.

 

 

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