Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
  • Location
    Boulder, CO
  • Interests
    I help build a small part of the web with @CivicPlus, and care about accessibility, progressive enhancement, RWD, and a well-built open web.

kylegach's Achievements


Newbie (1/14)



  1. I’m still working on the site in which they’ll be featured, but here’s the finished animation from this thread (I changed it a bit from my original zooming-in plan) and another one that also animates the viewBox: http://codepen.io/kylegach/pen/jqYaYp http://codepen.io/kylegach/pen/wGpRWY I’m all ears for suggestions of improvement, if you feel like sharing. Specifically, in that first one, I had to do some funny stuff (see the tweens ending with “_strokeReset”) because I couldn’t get the onComplete parameter of TweenLite.to() to work. It would fire immediately, instead of after the animation finished, which had the result of completely cancelling the line drawing effect. And in both, I had to redefine any width and height that I changed with a tween, because GSAP was setting them to “auto” once the animation looped. Simple enough, but it seemed like there should be a better way. Thanks again for your help, Craig & Carl! I’ve felt very welcome here, and had fun learning GSAP for the first time. Now I just need to get it working in my statically-generated React site... Done!
  2. Thank you!! I suppose I shouldn’t be surprised it was something so relatively simple when I was operating on ~4 hrs sleep while working on it last night. That explanation was very helpful and solved my issue exactly. And yes, I intentionally made the aspect ratios match, per your comments in that quoted post. Thanks also for your original house Pen. It was obviously inspirational. The animation I shared is part of a larger effort, which I’ll be sure to share here once it’s complete so you can see what you helped create.
  3. I’m looking for some help, please. I’d like to use the zooming effect like in the quoted Pen, but the viewBox attribute isn't behaving as I expected and I can’t tell what I’m doing differently. Here’s the original Pen with the issue: http://codepen.io/kylegach/pen/jqYaYp (Edit: this is now fixed, but the simplified one still exhibits the issue, for reference) And here’s a simplified test case without GSAP to show that even a static viewBox isn’t behaving the same as PointC’s example: http://codepen.io/kylegach/pen/ONzzaG I’ve also read this (excellent) explanation of the SVG viewport, viewBox, and preserveAspectRatio: https://sarasoueidan.com/blog/svg-coordinate-systems/, but I just cannot determine why mine isn’t working. Any help would be appreciated. Thanks!