Jump to content
Search Community

Random stagger animations

Androlax test
Moderator Tag

Recommended Posts

Hello again,

 

I have a new problem, for fun I try to do something interesting, but I really can't find a way how to dit again (cf the topic on bubbles animation I made :()

 

Look at the screen, I would like to have some bubbles I mean, having different  width, different X moving, and maybe different delay between each, to make it smooth and feel like there is really some random bubbles coming from this little pipe.

 

For now I have something like that

 

let object = this.animations.laboratory.bubbles,
$bubble = $(object.el).eq(0);
 
for (let newBubble = 0 ; newBubble < object.maximum ; newBubble++) $bubble.clone().insertAfter($bubble);
 
gsap.fromTo(object.el, object.duration, {
opacity: 1,
y: 0,
scale: Math.random(),
transformOrigin: 'center'
}, {
opacity: 0,
scale: 0,
x: Math.PI * 4,
modifiers: {
x: x => Math.sin(parseFloat(x)) * 5 + 'px'
},
y: '-=100',
stagger: {
each: object.duration / object.maximum,
repeat: -1
}
});

 

 

It seems like the other topic, but I tryed to do something with timeline maybe ? To add each bubble with random values but I cant find how etc..

I can't find a way to make them coming closer than the other bubble "randomly" and feel like it's "natural".

 

I really googled everywhere since this morning but I can't find a lot of "tuto" on how to GSAP. So I have to practice a lot, and I'm kinda a newbie on GSAP, so sorry ^^

 

But thanks for your help If you find a way

Capture d’écran 2019-11-27 à 13.04.11.png

Link to comment
Share on other sites

Hey @mikel,

 

Thanks you, I understand for the scale so. Do you have any idea for the "x" moving randomly ? And do you have any idea on the fact that I would like bubbles to be closer (randomly too), and that could be infinite ? Like, when I try to make bubbles closer like :

 

stagger: {
each: (object.duration * 0.7) / $(object.el).length,
repeat: -1
}

 

It don't work, I mean, when every bubbles have finished, they don't restart automatically

Link to comment
Share on other sites

Hey again,

 

I did that so :

 

See the Pen wvvVvBK by th-o-benoit (@th-o-benoit) on CodePen

 

I feel like it's not that bad.

 

I really don't understand what I did in the stagger thing, I understand a bit the modifiers, but stagger is really strange for me.

 

If someone have any idea how to improve this, I would be happy to hear it ^^

 

Thanks a lot @mikel

  • Like 2
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.
×
×
  • Create New...