[Confusion when organizing functions with ScrollTrigger and timelines.]

Hi! I made a timeline attached to a scrolltrigger. When the SVG div appears on the screen, the title is animated, then the subtitle, the icon and each element of the formula, the problem is that the word How Genius barely "appears", the rest of the elements are animated for more than the user has not scrolled to see them, and I would need each element to follow its animation as it scrolls, how can I do? I don't want to use scrub

[gsa.utils.wrap() i need random values]

I need to randomize the colors to each .box. I tried utils.wrap but it places them in an order, and with "random" they all get painted a color and the color changes when updating .... What can I do? I've been with gsap for two weeks and I'm a bit dizzy with so much information

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

[Improve an animation of butterflies flying]

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

[Improve an animation of butterflies flying]

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

[Improve an animation of butterflies flying]

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