Jump to content


TimelineMax Particles Loop

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

Refering to the slide TimelineLite Labels in the Demo on this page http://greensock.com/jump-start-js#comment-497907


How could I make the particles loop indefinitely without having a delay in between each iteration of the animation? I can get it to loop infinitely using the code below but the delay is making things not so smooth and not what I want the user to experience. Basically I want it to look like they are infinitely traveling at warp speed through space just for fun to see if I can do it.


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<style type="text/css">
    #demoBackground { position: relative; background-color: #000; overflow: hidden; width: 100%; height: 100%; visibility: hidden; }
    #particlesBtn { margin: 10px auto 0; width: 120px; }


<div id="viewContent" class="boxBorder innerBoxSmall spinnerImg">
    <div id="demoBackground">
        <div id="dotContainer"></div>

    <button class="btn" id="particlesBtn">REPLAY</button>

<script type="text/javascript" src="Scripts/greensock/TweenMax.min.js"></script>

<script type="text/javascript">
    $(window).load(function () {
        var dotContainer = $("#dotContainer"),
            particlesBtn = $("#particlesBtn"),
            tl = new TimelineMax({ repeat: -1 });

        function getParticlesAnimation() {
            var particlesTimeline = new TimelineMax({ repeat: -1 }),
                i = 400,
                radius = 400,
                centerX = 314,
                centerY = 145,
                dots = [],
                rawDots = [];

            while (--i > -1) {
                dot = document.createElement("img");
                dot.src = "/Content/images/dot.png";
                dot.id = "dot" + i;
                dot.style.cssText = "position:absolute; left:" + centerX + "px; top:" + centerY + "px; width:1px; height:1px;"
                var angle = Math.random() * Math.PI * 2,
                    insertionTime = i * 0.001;

                particlesTimeline.from(dot, 0.001, { opacity: 0, immediateRender: true }, insertionTime);

                particlesTimeline.to(dot, .7, {
                    left: Math.cos(angle) * radius + centerX,
                    top: Math.sin(angle) * radius + centerY,
                    width: 20,
                    height: 20,
                    ease: Cubic.easeIn,
                }, insertionTime);
            return particlesTimeline;

        // build timeline
        tl.add(getParticlesAnimation(), "particles")

        particlesBtn.click(function () {

        //show the demoBackground div after DOM is ready and all images loaded
        TweenLite.set($("#demoBackground"), { visibility: "visible" });




Link to comment
Share on other sites

Hi Ubersoldat420,


Welcome to the GreenSock forums. It is much better to post here than in article comments. Lot easier to have a conversation, so thank you!


One way of accomplishing this "infinite starfield" effect is to have 2 repeating timelines that overlap.

So instead of making the main timeline repeat, you nest 2 timelines that repeat and offset their start times.


A demo is worth a thousand words they say: 



Also, please note that all the Jump Start demos are available on CodePen: http://codepen.io/collection/ifybJ/

For learning it can be great to just edit the code of something that is working.


If you want to use CodePen to create your own demos (this is great if you ever need our help with something) please read this: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


Happy Tweening!

Link to comment
Share on other sites

... and the better answer you think of 30 minutes later is.... just make each tween in the particlesTimeline repeat.

You only need one particlesTimeline, not 2 overlapping ones.




note each tween has repeat:-1 and I added a repeatDelay too.




Play with the repeatDelay, as it gets smaller the density will increase.

  • Like 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.