Thread by @sarah_edo

Here’s a thread full of some browser tricks I’ve learned over the years that might help you do animation or other interesting things, in case your resolution is to do more of these kinds of projects

getBoundingClientRect() is an awesome native method that tells you important information about an element’s placement on the page. It’s super useful for animation logic, but also debugging!

developer.mozilla.org/en-US/docs/Web…

The first few times I’ve broken everything in d3.js and freaked myself out was because of a domain, range, extent issue. If you learn these, your chances of scaring yourself and breaking thing go way down.

If a div has position: absolute it will be placed absolutely on the page. But if it’s containing div has position: relative, it will be placed absolutely inside that container. This is super powerful and can help speed up placement.

Unlike CSS in divs etc, where there’s a concept of layout flow and one thing moves around the placement of another, SVG mostly works on coordinates. You’re not having something bump into or move something else around. (There are relative path values, though)

It will be really hard to animate something correctly until you understand transform-origin. And sometimes it doesn't work as you'd expect, esp. chaining and stacking. Using matrix transforms can help but it’s easier to use @greensock.

codepen.io/GreenSock/pen/…

That's all for now! Good luck on your projects! ☺️