Jump to content
Search Community

Tween on dynamic paths

broggi 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

New-ish to GSAP (I've done some scrollable animations before) and I'm trying to get multiple tweens working. I'll try to describe my goal as best as I can based on the picture I uploaded:

 

After page loads

1) Sprite sits at yellow dot. 

2) User clicks on one of the 4 boxes and sprite moves along a straight line (right angles) path.

3) When sprite finishes moving along the path, user is free to click any other box.

4) Sprite travels along the proper path to get to whichever box the user clicked on.

 

Can anyone point me in the right direction for how I should go about doing this? A few sentences would be very appreciated. 

 

Thanks a lot!

 

Screen Shot 2018-10-12 at 17.56.41.png

 

EDIT: I forgot to mention that I want this to work no matter the size of the display.

Edited by broggi
Link to comment
Share on other sites

Welcome to the forums, @broggi

 

We really try to stay focused on GSAP-specific questions around here rather than generic "tell me how to build my project" type of things. I wish I had more time to devote to challenges like this, but perhaps someone else does. 

 

If you've got any GSAP questions, we'd love to help. 

 

Good luck with your project!

Link to comment
Share on other sites

Just now, GreenSock said:

Welcome to the forums, @broggi

 

We really try to stay focused on GSAP-specific questions around here rather than generic "tell me how to build my project" type of things. I wish I had more time to devote to challenges like this, but perhaps someone else does. 

 

If you've got any GSAP questions, we'd love to help. 

 

Good luck with your project!

I didn't mean "tell me how to build my project," I meant "Given what I am trying to do, which of GSAP's tools will be best to use?" Or are those two questions synonymous in the GSAP forums?

Link to comment
Share on other sites

Oh, sure, I'd probably use either TimelineLite to sequence the moves together or maybe even use a single TweenMax instance with a bezier tween, but that's a bit more complex because you'd need to define the path data as bezier coordinates. Not totally necessary - just an option. I'd recommend doing whichever feels more natural to you coding-wise (or logic-wise). 

 

It seems like basically:

var tl = new TimelineLite();
tl.to(element, 1, {x:x1, y:y1})
  .to(element, 1, {x:x2, y:y2})
  .to(...)
  ...

 

Does that help? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Those are exactly the two tools I was looking at, so yeah, that helps a lot (I think I just needed confirmation that I was even looking at the right tools for this project). 

 

And actually your example gave me an idea of how to write my logic as DRY as possible. 

 

Thanks a lot ?

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