I am trying to (pls note I am new to both GSAP and HYPE) simulate the butterfly from this code pen https://codepen.io/leelou/pen/DJIse. I created the Hype document and added the sprite sheet with the same ID and the GSAP code as used in the example. But when I try to run, it is showing entire sprite sheet but not the single butterfly flapping and flying. Please help. I have attached the hype document I was trying…Thanks for your time ! butterfly.hype.zip (104.4 KB)
Create a new timeline to animate the butterfly and flapping wings and set an action keyframe for it to loop or ping-pong.
Go to the main timeline, select the butterfly and move it to its start point. set keyframes for the left and right originl positions, then click on the bezier symbol next to the origin (left) keyframe button. This will set it as a motion path. Click on the record button, move the time cursor to the exit time, then drag the butterfly to that position. Turn off the recording.
To create the irregular flight path, double click anywhere along the motion path to create a bezier point and adjust as desired, then add more beziers and adjust. You can also drag the bezier points along the timeline to have the motion speed up and slow down as desired. Note that you can set the butterfly to follow the angle of the path or to retain a fixed orientation.
Thanks TYancy for the reply… But not sure, if I want to do this. The idea is to use the sprite sheet and use GSAP plugins to animate butterfly from Hype. Pls see the codepen example
This is a version with GSAP and a possible Hype alternative.
butterfly-vDBear.zip (219.5 KB)
@TYancy The OP wanted the GSAP fix rather than an explanation about using motion paths to simulate the flight 
however I have included a “motion path” alternative in the above example to highlight your explanation.
1 Like
Fantastic DBear… Thank you so much !!!