How to create/interrupt a repeating idle animation

[hidanielle]

Hey, I am new to Greensock but I'm trying to set up some background and cursor effects for a page. I've attached a Codepen of where I've gotten so far.

 

Essentially, I'd like to have an "idle" animation on a page, where these squares are floating around randomly within the bounds of the screen infinitely until a mouse hovers over a link, where I'd then like the squares to come together into one and follow the cursor. Then, go back to floating around the page on mouseout.

 

I was able to get the squares floating around randomly infinitely by creating a reusable tween function that calls itself on complete with random values generating (I found this example on these forums), but when I try to hook it up to the rest of the effects, the squares come together on hover but then immediately move back to the repeating random tween and it's all sketchy.

 

I suspect I am just lacking a proper understanding of how to utilize timelines? Any help would be much appreciated!

Thank you so much :)

See the Pen pojymBg by hidanielle (@hidanielle) on CodePen

[OSUblake]

Try this for now. I updated everything to v3 syntax. One problem is that those random movement tweens are recursive, so we need to kill them.

 

See the Pen 66b5031f646ca23c565fb693de35f132 by osublake (@osublake) on CodePen

 

 

@GreenSock I couldn't get killTweensOf to work. Can you take a look at that demo on line ~59. I had to manually kill the tweens.

 

 

[GreenSock]

10 hours ago, OSUblake said:

@GreenSock I couldn't get killTweensOf to work. Can you take a look at that demo on line ~59. I had to manually kill the tweens.

Good catch - it was actually killing the animations themselves, but the bug had to do with it not removing the tween from its parent if (and only if) it was a tween with an internal timeline (meaning it had a stagger or keyframes). Should be fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

[OSUblake]

15 minutes ago, GreenSock said:

Good catch - it was actually killing the animations themselves, but the bug had to do with it not removing the tween from its parent if (and only if) it was a tween with an internal timeline (meaning it had a stagger or keyframes).

 

Well that's strange as none of the tweens had staggers or keyframes in that demo. 

[GreenSock]

10 minutes ago, OSUblake said:

Well that's strange as none of the tweens had staggers or keyframes in that demo. 

Yeah, they kinda did because there was a randomized "delay" (essentially a stagger)  

[hidanielle]

@OSUblake Ah this makes sense! Thank you so much for this!