I've noticed that accordion animations often feel awkward and I'm curious why. Most implementations work by measuring the 'scrollHeight' and trying to animate from 0 to that value. The main issue here is that 'scrollHeight' can only be known after the render finishes, which causes the animation to start late, jump on the first frame, and the easing feels off since it's working with an estimated value. I've seen some hacks using 'max-height: 9999px', which just makes the easing curve incorrectly span a huge value instead of the actual content height. I decided to take a different approach by predicting text height before the render, allowing the animation to target the exact value without any measurement or jumping. This method feels much smoother and more natural.
6 Answers
This sounds like a great idea! But I have to say, your demo site doesn’t work well on mobile devices. It could really use some improvements for smoother usability.
Honestly, this seems like a simple fix. Just use a grid layout and animate the rows instead. You’ll likely see better results without all these complications.
You might want to consider using the event loop effectively; it could help with managing your animations more smoothly while avoiding the inconsistency of measuring 'scrollHeight'.
Not sure what you’re thinking with this approach. It feels a bit overhyped to me, but okay. It’s just hard to take it too seriously when these ideas get advertised everywhere.
By the way, I saw your demo! Here’s the link for those interested: https://pretext-studio.vercel.app. The UI looks cool!
I love your design! Props to you for creating such a user-friendly interface!
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads