Jump to content


Animate an object along a path and reveal dots behind the object

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

I've been tasked with animating an object (a ship) along an invisible path (that's provided to me in an Illustrator file), where the path becomes dotted as the object passes along it. See the attached screenshot.


I've been working with GSAP for a couple of weeks now and I feel confident it's possible, and I'm happy to dive in and figure it out, but I thought it'd be wise to ask for a few pointers first.


This thread seems to touch on the dotted path part of it, and I imagine it's a matter of combining that advice with some additional code that'll move the ship along the same path?


I'm not quite sure how I'd ensure the ship and the revealed dots would stay in synch … perhaps one can directly rely on the other?


Thanks for any helpful tips any of you may have!


Link to comment
Share on other sites

To keep your tweens in sync, even if those tweens are animating different elements. You can use the position parameter.

.to( target, duration, vars, position )

And you would set the position parameter on both tweens to either zero 0. Or you can give the tweens the same label and they will animate in sync.




Here is a nice video on the GSAP position parameter:



I hope this helps! :)

  • Like 3
Link to comment
Share on other sites

Jonathan is exactly right, and I also wanted to mention that the entire GSAP system is completely synchronized. You don't need to worry about one animation drifting or having two that start at the same time somehow getting out-of-sync. You can use a timeline to control them both as a whole, but you don't even need to do that. As long as both start on the same "tick", they'll remain totally synchronized (unlike most other engines - you can see a demo here: http://codepen.io/GreenSock/full/e3ac33404937de0eb77c789323367da8/). 


Let us know if you need anything else. And we'd love to see the final result when you're ready to share. 

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