css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

So I really like the countdown on the Google I/O site https://events.google.com/io2016/?gclid=CPSVq9bjo8sCFU1gfgodjmQE6w - so much so I had a burning desire to figure out how they did that! I did a little snooping in the source and it turns out they're

  • taking SVG paths (the number shapes)
  • sampling the path
  • drawing this path to canvas (with 4 different stroke colors)
  • tween between the different number paths to create the animation

Google's version of the code is a lot more complex, accounting for resizing and complexity of the different paths, but this is just a simplified version of the same technique.

If you would like me to write a blog post further explaining this technique let me know!

Comments

  1. Awesome Rachel, really smooth and interesting to see this achieved through canvas - that countdown on the google site is a beauty. The MorphSVG gsap plugin would be able to achieve a similar result which I may tackle now i've seen this!

  2. Super gorgeous and very smooth! You should definitely write a post about this. :)

  3. Canvas & SVG seems a really good combination ! Great job (y)

  4. @Mamboleoo agreed! I love combining the two techs, best of both worlds etc. πŸ˜€

  5. This is awesome! but it does seem strange to me to use canvas when the same thing could be done fairly easily in SVG, as @olichalmers suggested? Ooo maybe we should both do one and then compare contrast techniques!

  6. Nice work Rachel! I would definitely read your blog post explaining this technique.

  7. @olichalmers indeed it would handle the shape morphing quite well I'm sure. As for animating different stroke colors on the same SVG path, I feel (without any investigation) it can't be done. Would love to see someone's SVG-only attempt at this though if they're game!

    (edited as I just saw @sdras comment) I think the stroke part is the challenge (and I assume is why the dev who built the I/O site took this route). Another possible reason - rendering performance on mobile devices (thats just a stab in the dark). Or maybe it's just that Google is generally pretty strict about the licenses on the open source libs they use on their sites/products and GSAP just didn't make the cut & rewriting your own path-morphing script is not an easy task! Would love to see an SVG expert crack this one!

  8. Totally understandable reasoning, but I think and am not at all sure that I might have an idea that could make it work. Would need a minute to do so, though :)

  9. Those are all totally possible reasons for them choosing canvas over SVG for this. So many possible factors! I'd love to read more about how you made this one happen @rachelsmith. And an SVG comparison would be rad to see if anyone wants to give it a go. :)

  10. Stroking 4 SVG paths (or even better, use elements duplicating the same path) should be equal in performance to stroking a canvas path (since you're changing the path shape every frame, anyway).

    The difference comes between sampling the path point by point to create a polygon versus using actually curved path segments. Sampling to polygon could slow down (or show noticeable discontinuities) if you were drawing it at high resolution. For morphing cures, if you didn't want to use the GSAP plug-in, you'd need to think much more closely about the geometry, converting all the paths to cubic beziers then interpolating control points instead of on-path points.

  11. @grapestheme nice! I did not realise Raphael could animate paths like this

  12. Animating paths with colour like that is perfectly possible in SVG. The canvas part of this isn't really necessary although the performance might be better - would need to test it. @rachsmith @sdras

  13. @rachsmith @valhead @sdras @AmeliaBR Here's a demo - a little rough round the edges but it works ok http://codepen.io/chrisgannon/pen/NNGKeo/

  14. Nice @chrisgannon- I had thought about two ways to do this and they're both different from yours- do you want to be part of our article? I'll ping you!

  15. I realy need to learn svg. That is awesome !

  16. You deserve an Oscar for it. Congrats! πŸ‘πŸ‘πŸ‘

  17. The Google I/O site is using GSAP to animate those shapes, but's it's not using the MorphSVG plugin. There's no way the plugin would be able to maintain those shapes during a morph. Here's what it would look like… http://codepen.io/osublake/pen/038b2500462a1d32e36a0596b18228cb

    However, it's not a problem with the plugin. As @AmeliaBR touched on, Beziers just don't interpolate well due to their control points. To maintain the shape, you can approximate the curves by subdividing it up into tiny segments like this. http://codepen.io/osublake/pen/jbVPqw

    Now that you have a bunch of line segments, it's very easy to interpolate between the different shapes using canvas or SVG. But this is also where SVG performance will start to fall off as it has to maintain elements with 1000s of points. Canvas doesn't have this problem as it's just a blob of pixels. Throw in multiple colors, and this means using more SVG elements, resulting in further performance degradation.

    When it comes to performance, SVG just has trouble keeping up with canvas. But as @rachsmith demonstrated, you can use the two together. I use SVGs as the underlying data for a lot of my canvas animations. Here's somes demos where you can see the two getting along just fine with each other.

    Side by side morphing - http://codepen.io/osublake/pen/RWeOWX

    Texture mapping - http://codepen.io/osublake/pen/vNjjqa

    Speed and motion path - http://codepen.io/osublake/pen/XXbLer

    Cubic Bezier easing - http://codepen.io/osublake/pen/OyPGEo

  18. I did the morphing effect with SVG and couldn't think the way to animate the lines with SVG. http://codepen.io/balapa/pen/NNqJKV Your pen is really helpful @chrisgannon

  19. Yes. A blog post would be awesome!

  20. Great example and great discussion. Thank you to all the contributors.

  21. @sdras I'm interested to see your two methods because the one I devised is by no means perfect.

  22. Very cool! Nice job. I'd like to see a post. SVG/Canvas animation is something I haven't quite gotten a handle on yet so I'm impressed!

    Keep up the good work!

  23. @osublake Yeah, MorphSVG from GSAP was the first thing that came in my mind when I saw first saw it; I'm surprised they're not using it (or it had limitations like the ones you mentioned).

  24. would be amazing if your code had comments

  25. Great work Rachel πŸ‘, thanks for sharing! Also, you may want to replace the TweenLite URL with https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js

  26. The TweenLite file is included using an http url, throwing a mixed content error in chrome :)

  27. oops! thanks for letting me know @Skadi2k3

  28. Super awesome. Blog post please. :)

  29. I hope you do write a post. I didn't quite get the way you used the GSAP plugin

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...