pawelza

Had this story bookmarked on Twitter for a while and finally got around to reading it. I share Craig's sentiments even though I'm not so active on here. The general demeanor of these forums is amazing - especially the fact that I know I'll generally get an answer on here quicker than if I'd have posted on StackOverflow. And without the snark! I'd also like to recommend a weekly newsletter of forum activity - even skimming through threads that other people are discussing helps but sometimes I forget to visit to browse. I <3 you GSAP people.

Thanks Carl. Ah that solution of collecting the face positions is pretty neat. That sorts out the problem (and my confusion) around the codepen linked in my second post in this thread - which is really exciting actually. As for the onUpdates that I'm using - that's almost certainly a bad design decision on my part. I've just added them in there to be able to observe for collisions between the balls and the div, as well as the balls and the face. The idea was that: checkFrame1Hit - checks to see if the first circle has hit the div (which then should fire off checkFace1Hit) checkFrame2Hit - checks to see if the second circle has hit the div (which then should fire off checkFace2Hit) checkFrame3Hit - checks to see if the third circle has hit the div (which then should fire off checkFace3Hit) checkFace1Hit - checks to see if the first circle has hit the face emoji (which then should make the first text appear) checkFace2Hit - checks to see if the first circle has hit the face emoji (which then should make the second text appear) checkFace3Hit - checks to see if the first circle has hit the face emoji (which then should make the third text appear)

https://codepen.io/pawelza/pen/WGNyAy Actually here's a more stripped down version of the above - this one still has the problem of the circles blocking, and the growing delay to the emoji.

I'm practicing working with the Timeline, and I've come across a bit of a challenge. This codepen has a button that moves 3 circles towards a div block, and then towards an SVG of an emoji. The emoji then displays a word in a thought bubble. All 3 circles move as they should, and eventually move onto the emoji as they should. The problems I'm facing are: A circle should make a complete trip (start -> div block -> emoji) before the next one starts its animation. Currently what happens is each of the circles go from start -> div block, and only once all 3 are there do they start moving -> emoji. I'm pretty sure all of this has to do with the way my timeline is being managed but I'm not quite sure where I'm going wrong. I suspect it's the timeline because there's some kind of incremental delay once the circles have to move towards the emoji, and that delay grows even more once the words start appearing in the bubble. I'm guessing I should use stagger() but I don't know how I'd use it here.

Wow what great responses. Jonathan - oh my goodness you're right. I noticed last night when I changed those each() calls to a regular for loop. What a silly oversight Carl thanks! I didn't know about adding event listeners to TweenLite.ticker - that's waaaaay saner than my approach Thanks OSUblake, great resources. Love your codepen example as well - working through that now.

Figured out that the function called with onUpdate in the TimelineMax to() method shouldn't pass any arguments. So instead it just runs a checkHit() function. The thing that's tripping me up now is the function itself. Any idea why the above would throw a M(...) is null error? New codepen is at: http://codepen.io/anon/pen/JRjKLv

Hey Jonathan, thanks for the reply. I'm guessing I need to do something like the following: http://codepen.io/anon/pen/QKWNBP Although I think I'm messing up inside of the `Draggable.create` function by passing through a collection instead of a single object because my console log isn't firing. Although I've tried looping through but that doesn't work and nearly crashes the browser: http://codepen.io/anon/pen/ZpEWPQ

Hi forum! I've got a 2 part question: Question 1 I've forked a copepen sample that I found in the forums and I'm trying to figure our how to use collision detection to get the colorful balls to update the background color of the white balls as they cross over them. I'd like to have the changes be incremental rather than change absolutely i.e. #FFFFFF becomes #AAFFFF rather than #00FFFF if that makes sense. Question 2 Maybe this will become obvious once the collision detection question is answered but I'd also want the white balls to "swallow" the colorful balls as they cross paths. Are there any existing elegant ways to achieving this?