Noël Cserépynoelcserepy.hashnode.net·Jan 9, 2023FeaturedMaximizing the Power of Framer Motion with useAnimationControlsFor most animations, we create variants for different animation states and plug those into the animate prop of our motion component. animate controls which variant the component animates to. It is triggered automatically when the component loads or t...Discuss·76 likes·843 readsframer-motion
Chetan vermachetanverma.hashnode.net·Aug 1, 2022FeaturedHow to create Awesome text animation with framer-motionHere is the video for this tutorial - https://youtu.be/wgXLE_GZ9sM Hey Internet, In this blog, we will create text animations with framer-motion. In this blog, we are going to use Next.js but you can follow this for any React Project. So to get start...Discuss·75 likes·2.8K readsanimation
Victory TuduoforOpen Replay's Technical Blogopenreplay.hashnode.net·Jan 26, 2023FeaturedDoing animations in React with Framer MotionTo improve user experience, animations and micro-interactions are essential to many digital products today, and they bring more than just delight to users. Informative animations accompanying loading states, navigation, and others significantly impro...Discuss·64 likes·582 readsReact
Mukul Chughmukulchugh.hashnode.net·Apr 25, 2023Crafting Beautiful Animations in React with Framer MotionIntroduction In the world of web development, animations play a vital role in enhancing the user experience. Animations can make a website or application feel more responsive, engaging, and dynamic. One of the most popular frameworks for building web...Discuss·10 likesframer-motion
Franklin Martinezfranko361.hashnode.net·Apr 6, 2023Using the Rick and Morty API with GraphQL and React JS.We have previously used the Rick and Morty API with React but this time we will use it with the help of GraphQL and Apollo Client. 🔺 Technologies to be used. React JS Apollo Client TypeScript Vite JS Tailwind CSS (the installation and configurati...Discuss·21 likes·50 readsReact
Bhavya Vermabeebombshell.hashnode.net·Mar 5, 2023Using Framer Motion to animate your website ✨Writing long CSS animations has always been a hassle for web developers. But, what if I tell you, there is a better way of creating beautiful and pleasing animations with less code, yet incredibly easy? The answer to this question is Framer Motion. �...Nikhil Kadam and 1 other are discussing this2 people are discussing thisDiscuss·3 likes·41 readsframer-motion
Majd Abu Hmoudmecvino-coding.hashnode.net·Mar 3, 2023Framer Motion: Create Cool Animated CounterWelcome back to another article of Framer Motion, a series that is focused on creating cool animations, library updates, and solving problems. In this article, you will learn how to create a cool animated counter using Framer Motion. Let's create our...Discuss·5 likes·241 readsFramer Motionframer-motion
Abhijeet Gautamabhijeet05writes.hashnode.net·Feb 17, 2023Beginner's Introduction to framer-motionGone are the days when animating a website section used to take many lines of code in the CSS files. With the advent of different libraries (and trust me, there are too many), animating websites has become way more straightforward than it had been so...Discuss·1 like·66 readsReact
Majd Abu Hmoudmecvino-coding.hashnode.net·Feb 10, 2023Framer Motion: Create Cool Scroll Animation On CardsFramer motion is one of the best React Animation Libraries. It's Popular and makes it simple to create animations, and is a production-ready motion library for React 😁. I love this library so much because you can create complex animations and view o...Discuss·110 readsFramer Motionframer-motion
Victory TuduoforOpen Replay's Technical Blogopenreplay.hashnode.net·Jan 26, 2023FeaturedDoing animations in React with Framer MotionTo improve user experience, animations and micro-interactions are essential to many digital products today, and they bring more than just delight to users. Informative animations accompanying loading states, navigation, and others significantly impro...Discuss·64 likes·582 readsReact
Chetan vermachetanverma.hashnode.net·Jan 25, 2023How to create an awesome navigation menu using chakra-UI and framer-motion.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 any react project. so to get started let's set up ...Discuss·17 likes·272 readsReact
Noël Cserépynoelcserepy.hashnode.net·Jan 9, 2023FeaturedMaximizing the Power of Framer Motion with useAnimationControlsFor most animations, we create variants for different animation states and plug those into the animate prop of our motion component. animate controls which variant the component animates to. It is triggered automatically when the component loads or t...Discuss·76 likes·843 readsframer-motion
Sabhya Vermasabhya.hashnode.net·Jan 8, 2023Apple iOS Control Centre animation in React with Framer MotionIntroduction Apple iOS is full of nifty animations and a great source of inspiration when thinking about motion in your next web app. Many of these take users from one view to another in a seamless transition instead of a jarring switch. One such exa...Discuss·1 like·211 readsReact