© 2023 Hashnode
#animation
Introduction Hey everyone in this tutorial we will create an awesome animated dropdown menu using chakra-UI and framer-motion. we will be using next.js in this tutorial but you are free to use it on …
Here are 10 animation libraries for React that you can use to create animations in your React projects. Framer Motion (https://www.framer.com/motion/) - A React animation toolkit that makes simple an…
After learning about React Context, I wanted to test out my knowledge by building something, so I chose this challenge from Frontend Mentor to build a Social Media Dashboard with a dark mode theme swi…
First steps First I had to draw the ant. I made a very basic ant using SVG circles and lines. Here is the little fella. Next, I needed to figure out the logic for making him zig-zag up and down the p…
Introduction Objects in motion are always more attention-grabbing. The same goes for components in apps. This is why animations are crucial to delivering an excellent application experience. Today, I …
Have you played FIFA? If yes, have you seen a Hexagon-shaped stats comparison? I was a big addict of FIFA. Now, I am addicted to animations with Flutter. But, my addiction to doing stuff around Soccer…
"Animations are like spices – a little goes a long way. Too much and you'll end up with a jumbled mess, but just the right amount can take your app from bland to grand." Are you tired of boring, sta…
CSS or Cascading Style Sheet as the name suggests is used to add style to a web page. Amongst other things, it can also be used to create animations as well as transitions effortlessly. On the other h…
Welcome to the second tutorial in this series on animating with anime.js! In the previous post, "Become an Animation Master with Anime.js - Setting up the Environment and Basic Animations", we went th…
Animations, if used wisely, can take the user experience of your websites to a whole different level, and while it might sound intimidating at first, thanks to libraries like anime.js you can create a…
