Jump to content


Animate element across screen?

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

Newbie to GSAP! Working on a pen by leelou (thanks leelou!) with a butterfly flying across the screen.


Looking at the pen, is there anyway to start the butterfly from off the left side of the screen, and have it fly out the right side? I'd just like the effect of it flying across the screen but without appearing/disappearing into space, regardless of user's screen size.

See the Pen DJIse by leelou (@leelou) on CodePen

Link to comment
Share on other sites

Hi @websitewalrus,


Welcome to GreenSock Forums.

The easiest way: Use a "loop" as a motionpath and autoRotate: true.


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


In your Butterfly example you can set a yoyo:true in line 5:


tl2 = new TimelineMax({repeat:-1,yoyo:true}),



Another option: "The Bezier points that are returned are just elements inside an array, so you can reverse it if it's the wrong  direction." -  see comment of @OSUblake in: https://greensock.com/forums/topic/13220-animating-along-a-path/#entry54654


var motionPath = MorphSVGPlugin.pathDataToBezier("#pathforFly").reverse();



Oh, Mikel, you have to read the question slowly so you understand what the matter is !!!


Once again:


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


Set the #FlyPath wider, some margin-left ...


#FlyPath {
  position: relative;
  width: 130%;
  margin-left: -15%;
  height: auto;
  top: 12%;
  overflow: visible;
  z-index: 1;


Happy tweening ...



Edited by mikel
Just read and understand!
  • 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.