Animated Search Bar with Sliding Text like Instagram in Figma | Step-by-Step Tutorial
2.8K views · 2024-07-12
UI DesignInteraction & UX
☕️ Any support is appreciated! - https://buymeacoffee.com/designos
🔥 Don't forget to like, subscribe, and hit the bell icon to stay updated with more design tips and tutorials. Let us know in the comments what other tutorials you’d like to see!
🏘️Figma Community File - https://www.figma.com/community/file/1391854487602164929/animated-sliding-text-in-search-bar
In this video, we'll show you how to create a sleek and interactive search bar with an animated slider.
Timestamps:
00:00 - Introduction
00:16 - Community File
00:21 - Setting up the Search bar
01:46 - Component and Variants
02:46 - Prototyping
03:26 - Basic Animation
03:40 - Improving the animation
03:40 - Improving the animation
04:43 - Final Results
05:00 - Nested Components, Community File & Outro
🔥 Don't forget to like, subscribe, and hit the bell icon to stay updated with more design tips and tutorials. Let us know in the comments what other tutorials you’d like to see!
🏘️Figma Community File - https://www.figma.com/community/file/1391854487602164929/animated-sliding-text-in-search-bar
In this video, we'll show you how to create a sleek and interactive search bar with an animated slider.
Timestamps:
00:00 - Introduction
00:16 - Community File
00:21 - Setting up the Search bar
01:46 - Component and Variants
02:46 - Prototyping
03:26 - Basic Animation
03:40 - Improving the animation
03:40 - Improving the animation
04:43 - Final Results
05:00 - Nested Components, Community File & Outro