Jump to content


Random stagger animations

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

Hey @Androlax,



Trial - error - nice success. That looks great.



  • Thanks 1
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.