offsetTop and offsetHeight but with subpixel precision?
hi all, so I'm building a web animation tool called Wayfinder, which lets you treat elements like waypoints, project them onto a wayfinder div, and then animate traveler divs to and from the projections. under the hood, Wayfinder works by calculating a cumulative transform from the given waypoint to the given wayfinder, which is located in an ancestor of the waypoint element. the cumulative transform picks up all the computed offsets and transforms along the path up to the wayfinder.
Wayfinder works great at this point, but there's occasionally a minor problem with subpixel precision. the offsets returned by getComputedStyle() are type 'long', which means specified units like em might have subpixel values, but they are rounded. as far as I can tell, the pre-rounded offset values are not exposed anywhere. also, different browsers might have different approaches on which direction to round and when, although i'm not too concerned about that right now.
are these values actually exposed in a way i just haven't found yet? or is there a good way to calculate the values myself? is there a library that has solved this problem already, maybe jquery?
I looked into getBoundingClientRect(), which returns subpixel values, but there are multiple problems with that approach. gBCR is in relation to the viewport, but i'm trying to calculate differences in position/transform across a sub-path of the dom tree. also, gBCR is affected by transforms, so a rotation will alter the position and size of the rectangle. would it be possible to temporarily remove such transforms, get the bounding rectangles, calculate deltas, and then put the transforms back? would that be worth the effort?
is there a better way to tackle this problem i haven't thought of? thanks!
-anx
https://wayfinderanimationtool.com/
https://github.com/anxpara/wayfinder-animation-tool
13 Replies
So basically FLIP technique?
David Khourshid
CSS-Tricks
Animating Layouts with the FLIP Technique | CSS-Tricks
User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich said,
Wayfinder is a different approach to web animation than the flip technique, although the math is probably similar. flip probably isn't as sensitive to subpixel imprecision as Wayfinder is
with Wayfinder, you project waypoint elements to wayfinder divs, which act as a common ground for travelers to animate on
I'm still lost but looks interesting, if the maths is the same I'd look to others FLIP solutions see if you can find your answer, was more my point.
have you looked through my site?
it's a work in progress. i published the core documentation, so i'm finally starting to share it with people
If you make it work with GSAP I'll try it 😅
theoretically you can use it with GSAP right now
if GSAP can animate width, height, and matrix3d (or transform: matrix3d), then it's compatible
Shouldn't animate height/widths its bad for many reasons, but yea it does matrix
if your waypoints are the same size then no animation needed
if they're different, then you can either take the performance hit by animating size, or you can find a moment to set the size once
Yea but you shouldn't animate width or height directly was my point
i know
👍
Wayfinder doesn't do any animation itself, it just gives you the params to plug into your favorite animation library
so back to your suggestion to look at flip solutions, it looks like the linked solution uses gBCR(), so i'm not sure it would be able to handle rotate/skew/3d transforms, among other scenarios. i'll look for some established projects to see how they managed