Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to create a randomized animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Greensock!

I have some problem with creating a timelineMax-animation that got some random elements.


The animation consists of three types of air-bubbles (smallBubble, mediumBubble and largeBubble). 


The idea is that the bubbles shall go from the bottom to the top (y:500 to y:-30) the whole time. But the x-value shall be a randomized value between 1 and 730. I have tried with Math:random, but it does not work correct for some reason.


The other part of my question is how to create randomized order of the bubbletype (smallBubble, mediumBubble and largeBubble). So it not will be the same order that repeats in the animation, like: smallBubble, mediumBubble, largeBubble, smallBubble, mediumBubble, largeBubble, smallBubble, mediumBubble, largeBubble, etc etc.


I guess I shall use Math:random in some in this case as well.


So, how do I create a randomized x-value and a randomized order of the bubbletype?


Thanks in advance.





See the Pen ogmdjQ by anon (@anon) on CodePen

Link to comment
Share on other sites

The problem you're having (if I'm understanding correctly) is that the same "random" value is assigned to the three .bubble elements. This is because of the staggerFromTo ... it's receiving one set of from properties/values and one set of to properties/values. Given there are only three in this example, this codepen should help


See the Pen KwJRjo by anon (@anon) on CodePen


If this is to be ramped up to many more bubbles, I would create the timeline vars dynamically in a loop. But, this will assign each bubble a start and end value for x/y ... but that value will live on for the duration of the page life. If that value needs to change, I would think you could dynamically set it with a callback.

  • Like 1
Link to comment
Share on other sites

Yup, Shaun is absolutely correct.

The same random values apply to each element in the stagger.


The solution is to loop through your elements and give them each their own animation in the timeline.


This can be done a number of ways and you have quite a few needs that go beyond the GSAP API.


However, this should give you an idea of how to do some random things for each element, and yet do some very specific things based on size, such as change the speed.




Here is another demo with all the bells and whistles: http://codepen.io/GreenSock/pen/zrmiG?editors=001

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hi Carl,

Thanks for your advice. I skipped the Math:random-concept and went for a looped animation with an animation for each element. In the end it gave the same result I was aiming for.


I have a question about web-browsers, in particular Safari.


When I press the refresh-button in Google Chrome and in Firefox. The elements acts the same way (they way I want them to act). Some of them are invisible and others are placed outside the main div. This is not the case when it comes to Safari. When i press the refresh-button in Safari the elements are visible and placed in the upper left corner of the main div for a short while (a little longer on my iPad compared to my Macbook though). Then the elements turns invisible and are placed at their given X & Y coordinates.


Is this a common phenomenon for Safari? If so, is there a way around it?


Does Safari read the scrips in a different order compared to Google Chrome and Firefox? 


Best regards


Link to comment
Share on other sites

Sounds like there is a brief moment of your elements being displayed before the js executes.


Its easiest just to give the parent of your elements visibility:hidden in css and use TweenLite to toggle it in your JavaScript




#someContainer {

TweenLite.set("#someContainer", {visibility:"visible"});
  • Like 1
Link to comment
Share on other sites


Yes, thats must be the case.


I will go for the css "visibility: hidden" - concept.


Have a nice day! 

Link to comment
Share on other sites

Unfortunately, the css visibility: hidden didn't solved the problem with Safari.


The animation still works perfect in Google Chrome and Firefox. So my conclusion is that this phenomenon must have something to do with how Safari load the animation-files...  

Link to comment
Share on other sites

Here is a CodePen demo.


I have tried to simplify the code as much possible.


When I press the refresh-button in Safari both div #iBody and div #jBody is visible in the upper left corner of div #demo7 for a short while, then they disappear (this happens to all the other elements in the animation as well). 


See the Pen jEjrdX by anon (@anon) on CodePen

Link to comment
Share on other sites

I can't test your CodePen because I don't have Safari, but what I do to prevent FOUC is put a class called unresolved on any containers that have a lot of initialization to do, or the body for that matter. And then at the end of my file after all the JavaScript is ready, remove the unresolved classes like this $(".unresolved").removeClass("unresolved");


See if that changes anything...

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

  • Like 1
Link to comment
Share on other sites

Ok, I see.


FOUC seams to be be the problem. I tried your solution (both in the container and in body) and maybe there is a slightly improvement. But the elements still flashes up and then they disappears in Safari.  

Link to comment
Share on other sites

Here is a fork of your pen: http://codepen.io/anon/pen/ogrQjK


(i replaced the missing background images with colors)


please try that in Safari. 


Notice I added TweenLite.render() and a little note at the bottom.


Any better?

Link to comment
Share on other sites

The code example I got from you works good in Safari. no FOUC at all.


It's a little different story with the "complete" animation on my webpage, there still is some FOUC in Safari. But maybe this is because there's a lot more code for Safari to read, and it becomes a bit overwhelming for the browser the read that amount of code a once?


I would appreciate if you could give me some general advice about filestructure when there is a lot of Greensock material on a webpage.


For example, which is the best way/order to load the scripts (jQuery, Tweenmax, SplitText etc, etc) to the webpage?


Shall I have separates files for the animation? For example one animation.css and one animation.js?


Is there some documentation I can read about how to optimize the animationcode and filestructure for different browsers?


I know this is a pretty unspecified question. But some general tips and advice would be very appreciated.

Link to comment
Share on other sites

Hi, I don't know what you mean by the "complete" animation on your page.


Its unlikely that the amount of code is too much for Safari to process. If you are animating thousands of elements or processing 10s of thousands of loops than perhaps you are doing something that slows down the processor and rendering. Most likely this would result in some stuttering or lag, but I don't think an operation would be skipped or that GSAP would do something incorrectly. Just impossible to say anything with any sort of confidence without knowing more.


As for your other question about file structure and such. I'm sure it could be the topic among many experts of great debate. Personally, I do not do any large scale application development so I'd be hesitant to instruct you here, but a few things.


Yes, keep your custom animation code in its own javascript file. Load it after TweenMax or whatever GSAP files are loaded.

It doesn't the order in which GSAP or jQuery are loaded, or any of the plugins within GSAP.

For the best end-user experience it is generally recommended that you minify all js into as few files as possible. The less server requests the better. Often better to load largish file than 30 small files. 


The most important thing in all this is to make sure your custom animation code (that you write) doesn't execute until after all images, fonts, html and css are loaded and the page is rendered.


Typically the last script on your page will be the last load. So place your javascript <script> tags before the closing </body> tags as opposed to in the <head>


When it comes to custom web fonts you might want to look into a library like Google Web Font Loader API: https://developers.google.com/fonts/docs/webfont_loader


Hope that helps a little.

  • Like 1
Link to comment
Share on other sites

Hi Carl,


Thanks for great support. I must say that Greensock's customer support really has impressed me  :-P .


What I ment with the "complete" animation was that the two element from my codepen example was just two of the many others elements from my "complete" animation on my website. I just choose those two elements to illustrate the Safari issues and skipped the others just for simplify the codepen example.


Have a nice day. 

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.