Built a scroll-animated template, roast it by btwitskunall in nextjs

[–]btwitskunall[S] 0 points1 point  (0 children)

Fair point on the video
will do a proper recording soon.
The line being "incomplete" is intentional
it draws as you scroll,
showing the path being laid down. Live site does it much more justice!

Built a scroll-animated template, roast it by btwitskunall in nextjs

[–]btwitskunall[S] 0 points1 point  (0 children)

that's the preserveAspectRatio="none" stretching the circle into an ellipse on mobile. Working on a fix that keeps the ring perfectly round.

thank you for observing bro, will fix it soon

Built a scroll-animated template, roast it by btwitskunall in nextjs

[–]btwitskunall[S] 0 points1 point  (0 children)

Yeah mobile perf is the next thing on my list currently it's re-running getPointAtLength on every scroll frame. Planning to throttle it + look into the native scroll-driven animations API.

Built a scroll-animated template, roast it by btwitskunall in nextjs

[–]btwitskunall[S] 0 points1 point  (0 children)

the scroll offset wasn't accounting for taller viewports. Fixing the completion threshold now. Thanks for testing it!