As a practice of States and Utils.interval, I just made this search bar interaction :D
Share : http://share.framerjs.com/5xacxw3nnnna/
Nice! Thought it was a Japanese flag 😂
yes really nice but it should have a looking glass not a red square no?
I do find the spring when collapsing not pleasant, especially the cropping on the circles. If you intend on using this in a design, I'd encourage you to reconsider the spring to not go past it's desired destination.
Dope, but for a second I thought it was a record button.
How about replacing the red dot with a search icon, would be a more fitting idea.
Take it further: search icon that transitions to an 'X' when expanded.
U-Kyung Kim takes feedback better than just about anyone I've seen posting design work to Facebook.
I would mistake it for "start recording" button, based on the colour and shape, but good animation anyway
Thank you for this example. To advance in my understanding of FramerJS , I tried to recreate your animation before looking at your code. Here's a different way to do, but without Utils : http://share.framerjs.com/pfklwzjrdgmv/