Random stagger animations

[Androlax 10 Likes (Newbie)]

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

[mikel 4,774 Likes (Superhero)]

Hey @Androlax,

 

You could try repeatRefresh for a random scale: "random(0.5, 3)" - more info here.

 

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

 

Happy bubbling ...

Mikel

[Androlax 10 Likes (Newbie)]

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

[mikel 4,774 Likes (Superhero)]

Hey @Androlax

 

Just an experiment ... 

 

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

 

But I can not explain what is going on.

Mikel

[Androlax 10 Likes (Newbie)]

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

[mikel 4,774 Likes (Superhero)]

Hey @Androlax,

 

VENI, VIDI, VICI  or 

Trial - error - nice success. That looks great.

 

Mikel

[ZachSaucier 7,129 Likes (Superhero)]

On 11/27/2019 at 9:27 AM, Androlax said:

I really don't understand what I did in the stagger thing

Learn more about it here: https://greensock.com/docs/v3/Staggers