Animate element across screen?

[websitewalrus]

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

[mikel]

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

Mikel

 

Edited August 5, 2017 by mikel
Just read and understand!