12734_1494126581
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
move object incrementally through array of points to final point
in GSAP
Posted
That did the trick! Many, many thanks!