Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by andyhullinger

  1. 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

    • Like 1
  2. 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

  3. 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

  4. 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 {
    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);