Improve an animation of butterflies flying

[Rebeca 0 Likes (Newbie)]

Hi there! I tried to simulate butterflies that float or fly, but I think the effect could be improved ... I see it very unnatural ... can someone give me a tip to improve it? I'm also not sure if the code I used is the most correct (just a week ago I started with gsap).
It had occurred to me that butterflies fly in more sinuous ways, but I don't know how to approach it, if someone has an idea I would appreciate it! Thanks a lot

See the Pen Bapmrpz by rebecakarenok (@rebecakarenok) on CodePen

[OSUblake 18,497 Likes (Superhero)]

I like to animate each property separately, so they run at different speeds and change at different times. Using a sine ease also seems to look more natural.

 

gsap.to("#mariposa-1", {
  ...
  x: "random(-180, 180)",
  ease: "sine.inOut"
});

gsap.to("#mariposa-1", {
  ...
  y: "random(-180, 180)",
  ease: "sine.inOut"
});

gsap.to("#mariposa-1", {
  ...
  scale: "random(0.6, 1)",
  ease: "sine.inOut"
});

gsap.to("#mariposa-1", {
  ...
  rotation: "random(-180, 180)",
  ease: "sine.inOut"
});

 

[OSUblake 18,497 Likes (Superhero)]

Some pretty good randomness using chance. I need to update it as it's using an older version of gsap.

 

See the Pen BRpgpR by osublake (@osublake) on CodePen

 

 

[Rebeca 0 Likes (Newbie)]

13 hours ago, Rebeca said:

Hi there! I tried to simulate butterflies that float or fly, but I think the effect could be improved ... I see it very unnatural ... can someone give me a tip to improve it? I'm also not sure if the code I used is the most correct (just a week ago I started with gsap).
It had occurred to me that butterflies fly in more sinuous ways, but I don't know how to approach it, if someone has an idea I would appreciate it! Thanks a lot

I have changed the original version. Made with svg MotionPathPlugin, where butterflies travel invisible lines to simulate flight

[Rebeca 0 Likes (Newbie)]

12 hours ago, OSUblake said:

I like to animate each property separately, so they run at different speeds and change at different times. Using a sine ease also seems to look more natural.

 

gsap.to("#mariposa-1", {
  ...
  x: "random(-180, 180)",
  ease: "sine.inOut"
});

gsap.to("#mariposa-1", {
  ...
  y: "random(-180, 180)",
  ease: "sine.inOut"
});

gsap.to("#mariposa-1", {
  ...
  scale: "random(0.6, 1)",
  ease: "sine.inOut"
});

gsap.to("#mariposa-1", {
  ...
  rotation: "random(-180, 180)",
  ease: "sine.inOut"
});

 

Thanks, I've tried it and it looks better! Now try invisible curved lines in the svg and traversing them with MotionPathPlugin

[mikel 4,775 Likes (Superhero)]

 

I love the example of @OSUblake
Here the GreenGulls.

 

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

 

Happy tweening ...

Mikel