Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
websitewalrus

Animate element across screen?

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

Mikel

 

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.

×