andyhullinger

Jonathan, thanks for the detailed explanation of the rendering and repaint going on behind the scenes. In Chrome I am ...so close... but I see now where my plan to hijack flex-box is gonna force me to "Write some code"

Though I gotta say GSAP never fails to amaze me

Here is an animated "wordcloud-ish meets bubblechart-esque" data viz exercise attempting to replace heavy packing algorithms, d3.js, etc. with some short, simple, sweet GSAP and exploit CSS3 flex-box's flex-wrap.

The idea is to allow a fixed collection of words to grow/shrink (coming from a stream of PubNub "votes") in place without overlapping. Essentially nudging/hugging their neighbors but maintaining the overall position.

For my needs it's working beautifully, until a "line-break" occurs. Curious to know if any of you might have ideas for smoothing out the "jump" when a word needs to hop onto the next line?  Or perhaps I'm missing something easy by incorporating GSAP's split text.

See the Pen XjYRkw by team (@team) on CodePen

Thanks for the confirmation Jack!

Rigging a puppet and attempting to reuse elements for legs and arms. Everything but the "hand" and "foot" work as expected across browsers. If I set simple (positive and negative) degree values for rotation in Chrome it works as expected, but in Safarit and Firefox the two "cloned" limbs are positioned differently?

See the Pen LNQbXM by andyhullinger (@andyhullinger) on CodePen

Also, why are there still specs for frame rate for HTML5? I understand it for video... but HTML5 doesn't have a frame rate you can control like Flash...

Good catch on the fps limits, definitely an antiquated metric. I'm curious how that even got in there...

Actually, I think the FPS is in reference to anyone relying on raw javascript for animation (mobile ads do this a lot) and getting the most from/or abusing  requestAnimationFrame

+1 for Back! (used in every banner I've built since 2008)

ahha! I was looking at the trees and missed the forest. Thanks!

Is it possible to pass-in a movieclip reference to a TimelineLite/Max instance? I want to reuse this timeline animation every time a "tooltip" movie clip is rolled over (via passing in the event.target). This "tortured" code almost works, but I can't seem to correctly clear() or "respawn" a fresh TimeLineLite instance each time.

var anime:TimelineMax = new TimelineMax();

someMC.addEventListener(MouseEvent.ROLL_OVER, myRollover);

function myRollover(e:MouseEvent):void {
sendClipToTimeLineLite(e.target);
anime.play();
}

function setClip(mc):void {
anime.appendMultiple([TweenMax.to(mc.child1, .2,{alpha:0}),
TweenMax.to(mc.child2, .5,{width:160}),
TweenMax.to(mc.child2, .5,{height:170}),
TweenMax.from(mc.child3,.2,{autoAlpha:0})], 0, TweenAlign.SEQUENCE);
}