Leaderboard

You can't have that console.log() sitting in the middle of your ScrollMagic code like that. Remove it and you should be just fine. If you have other questions, please provide a CodePen demo. Here's some info about creating one. You're using a really old version of TweenMax (almost 4 years) so I'd also recommend switching to the latest version (1.20.4). Happy tweening.

Ya, I thought they dropped whole processing.js idea and started focusing on JavaScript library only. As the processingjs.org hasn't changed over the years and all examples are old as well. Thanks for the book. I was watching the coding train video.

Your guess would be correct as to the problem. When you interrupt an animation, the value does not back to its original state, which can problematic with from tweens. You could do a fromTo tween, going from y=100 to y=0, which would fix the position problem. Not sure how you wanted to handle hovering in -> out -> in really quickly, but I set it up so only the position resets.

I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js. https://p5js.org/examples/hello-p5-flocking.html Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping. Boid.prototype.borders = function() { if (this.position.x < -this.r) this.position.x = width + this.r; if (this.position.y < -this.r) this.position.y = height + this.r; if (this.position.x > width + this.r) this.position.x = -this.r; if (this.position.y > height + this.r) this.position.y = -this.r; } There might be more unnecessary code that you can clean up step by step.