[Smoothing out flexbox?]

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

[Smoothing out flexbox?]

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

[simple rotation values for SVG behave oddly in chrome vs safari, firefox?]

Thanks for the confirmation Jack!

[simple rotation values for SVG behave oddly in chrome vs safari, firefox?]

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

[IAB Recommends 200kb file size for standard display ads]

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

[When doing banners what eases you definitively SHOULD have?]

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

[Dynamic MovieClip references passed into TimeLineLite/Max?]

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

[Dynamic MovieClip references passed into TimeLineLite/Max?]

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);
}