Back to Browse

Beautiful Filtering Animation in React with Framer Motion

8.3K views
Sep 15, 2022
34:47

Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A Create awesome filter animation with react, we also learn how to create react app with vite, how to create env file and get the image from themoviedb api. 👨‍💻Code: https://github.com/candraKriswinarto/react-filter-animation 🔗Link: vite: https://vitejs.dev/guide/#scaffolding-your-first-vite-project get api key: https://www.themoviedb.org/settings/api get popular url: https://developers.themoviedb.org/3/movies/get-popular-movies framer motion: https://www.framer.com/docs/introduction 🔗adding-custom-environment-variables put env in vite: https://vitejs.dev/guide/env-and-mode.html put ent in cra: https://create-react-app.dev/docs 🌎Live: https://react-filter-animation-sigma.vercel.app/ Timestamps: 0:00 - Intro 00:07 - Demo 00:58 - Setup react app with Vite 02:32 - ButtonFilters Component 07:45 - Movies Component 08:22 - Fetch data from TheMovieDB API 12:12 - Create Context Api 13:24 - Api Integration in Movies Component 20:12 - Api Integration in ButtonFilters Component 29:11 - Install and Setup Framer Motion 32:34 - Create .env file 👋🏻Contact Me: https://canddev.vercel.app/ 🌎 Find Me Here: Instagram : https://www.instagram.com/candra_kriswinarto/ GitHub: https://github.com/candraKriswinarto/ Linkedin: https://www.linkedin.com/in/candra-kriswinarto/ #react #programming #enjoycoding

Download

0 formats

No download links available.

Beautiful Filtering Animation in React with Framer Motion | NatokHD