move object incrementally through array of points to final point

[12734_1494126581]

I'm a complete newbie at GSAP, so I ask for your patience.

I've got a "dot" and six vertical marks spaced regularly in the x-axis and randomly in the y-axis.  The marks are in an array named "marks".  When the page is loaded (or refreshed), a random integer between one and six is generated (please see movement test).  Let's the random integer is 4.  What I'd like is for the dot to tween to first mark 1, then mark 2, then mark 3 and stopping at mark 4.  What happens with what I've written is that the dot move directly to mark 4, ignoring the intervening marks.

 

Here's my current js...

    start(){
        for(var i=0;i<7;i++){
            var mark = new this.lib.mark();
            mark.x = 75*i + 100;
            mark.y = 120 * (Math.random());
            this.container.addChild(mark);
            this.marks.push(mark);   
        }
        this.moveDot();
    }

    
    moveDot(){
        this.roll = Math.floor(Math.random()*5) + 1;
        this.showSteps.text = "Go to Mark " + this.roll;
        console.log("roll = " + this.roll);
        
        this.dot.x = this.marks[0].x;
        for(var i=0;i < this.roll;i++){
            var move = gsap.to(this.dot,{x: this.marks[this.currentIndex].x, y: this.marks[this.currentIndex].y, duration: this.roll});
            
            this.currentIndex ++;
            this.moves.push(move); 
        }
    }

 

I'm woefully unfamiliar with GSAP's methods.  Anybody give me a hand, please?  My thanks.

[OSUblake]

Welcome to the forums @12734_1494126581

 

I'm a little unsure about what you're trying to achieve here, but if you create all your animations inside a for-loop, they will not wait for the previous animations to finish. You could use a for-loop to construct a timeline, but it would really help if you could create a minimal demo so we can play around with the code.

 

[OSUblake]

Quick demo showing how you can construct a timeline inside a loop.

 

See the Pen wvreXWv by GreenSock (@GreenSock) on CodePen

 

[12734_1494126581]

That did the trick!  Many, many thanks!

[OSUblake]

And I totally forgot about some of the keyframe features added in 3.9.0.

 

 

 

See the Pen vYeJQxE by GreenSock (@GreenSock) on CodePen