{"id":20555095,"url":"https://github.com/shahramshakiba/framer-motion-basic","last_synced_at":"2025-09-25T20:31:28.652Z","repository":{"id":233505782,"uuid":"787314980","full_name":"ShahramShakiba/Framer-Motion-Basic","owner":"ShahramShakiba","description":"Framer Motion | My primary objective is on utilizing \"Framer Motion\" to animate React Apps effectively, enhancing user engagement and interactivity on the website (🟣Framer Motion)","archived":false,"fork":false,"pushed_at":"2024-04-17T20:33:40.000Z","size":2201,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-16T03:16:15.787Z","etag":null,"topics":["animations-css","framer-motion"],"latest_commit_sha":null,"homepage":"https://framer-motion-challenges-shahram.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShahramShakiba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-16T09:39:48.000Z","updated_at":"2024-09-09T15:32:22.000Z","dependencies_parsed_at":"2024-04-16T13:57:51.230Z","dependency_job_id":"eff90889-1cbb-4972-ac3a-95f308c4183b","html_url":"https://github.com/ShahramShakiba/Framer-Motion-Basic","commit_stats":null,"previous_names":["shahramshakiba/framer-motion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FFramer-Motion-Basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FFramer-Motion-Basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FFramer-Motion-Basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FFramer-Motion-Basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShahramShakiba","download_url":"https://codeload.github.com/ShahramShakiba/Framer-Motion-Basic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234244880,"owners_count":18801997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations-css","framer-motion"],"created_at":"2024-11-16T03:16:18.311Z","updated_at":"2025-09-25T20:31:28.086Z","avatar_url":"https://github.com/ShahramShakiba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" /\u003e \u0026nbsp; Framer Motion \u003cimg src=\"https://raw.githubusercontent.com/teamedwardforever/Readme-Generator/71f25dd8b98329b168142a6b782a107b75eab178/svg/Skills/Software/framer-icon.svg\" alt=\"Framer\" height=\"35\"/\u003e\n\n\u003c!----------------------------------------- Description ----------------------------------------\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" width=\"40\" height=\"40\" /\u003e\u0026nbsp; _Description_\n\n\u003e ### _Framer Motion_ is a popular open-source library for creating fluid animations and interactive user interfaces in React applications.\n- It provides a simple and intuitive API for defining animations, transitions, and gestures, making it easier for developers to bring their designs to life.\n  \n\u003cbr/\u003e\n\n\u003e [!IMPORTANT]\n\u003e\u003e #### Key Features \u0026 Benefits : \n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _Declarative Syntax_\n- Allows you to describe animations in a clear and concise manner. \n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _Provides a range of built-in animation controls_\n- Giving you more flexibility in creating dynamic and engaging user interactions.\n\u003cbr/\u003e\n\n***\n\u003c!--===================== Framer Motion =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; _React Challenges_  \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- #### In this project, my primary objective is on utilizing ` Framer Motion ` to animate React Apps effectively, enhancing user engagement and interactivity on the website.\n- The goal is to breathe life into the user interface by _creating fluid and visually appealing animations_ that captivate users and elevate their overall experience. \u003cbr/\u003e\u003cbr/\u003e\n \n\n\u003e _Which Concepts in Have I Covered_:  \n\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/White%20Flag.png\" alt=\"White Flag\" width=\"20\" /\u003e \u0026nbsp; _Vanilla CSS_\n- Animating with CSS Transitions\n- Animating with CSS Animations\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/White%20Flag.png\" alt=\"White Flag\" width=\"20\" /\u003e \u0026nbsp; _Building More Complex Animation with Framer Motion_\n- _Install_: ` npm install framer-motion `\n- Animating Between _Conditional Values_\n- Adding Entry Animations with _` initial `_\n- Reusing Animation States with _` variants `_\n- Nested Animations with Variants in _Child-Component_\n- Animating Staggered Lists with _` staggerChildren `_\n- Re-triggering Animations via _Keys_\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/White%20Flag.png\" alt=\"White Flag\" width=\"20\" /\u003e \u0026nbsp; _Animating Elements In \u0026 Out_\n- Animating Element Disappearances Removal\n- Making Elements Pop With Hover Animations using ` whileHover `\n- Animating Shared Elements\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/White%20Flag.png\" alt=\"White Flag\" width=\"20\" /\u003e \u0026nbsp; _Scroll-based Animation_\n- Scroll-based Animations with ` useScroll() ` and ` useTransform() ` Hooks\n\n \n\u003cbr/\u003e\n\n\u003c!-------- try it live --------\u003e\n#### _Give it a go in real-time and give me a Star_ \u0026nbsp; \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"25\"  /\u003e \u003ca href=\"https://framer-motion-challenges-shahram.netlify.app/\" target=\"_blank\"\u003e \u0026nbsp; _React Challenges_ \u003c/a\u003e \n\n\n \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\nhttps://github.com/ShahramShakiba/Framer-Motion-Basic/assets/110089830/b1276d95-c433-4dbf-8322-9fb38b0a0c42\n\n  \u003cbr/\u003e \n  \n\u003c!--======================= Social Media ===========================--\u003e\n## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/People%20with%20professions/Man%20Detective%20Light%20Skin%20Tone.png\" alt=\"Man Detective Light Skin Tone\" width=\"65\" /\u003e Find me around the Web  \n\u003ca href=\"https://www.linkedin.com/in/shahramshakiba/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/linkedin/default.svg\" width=\"52\" height=\"40\" alt=\"linkedin logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://t.me/ShahramShakibaa\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/telegram/default.svg\" width=\"52\" height=\"40\" alt=\"telegram logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://wa.me/message/LM2IMM3ABZ7ZM1\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/whatsapp/default.svg\" width=\"52\" height=\"40\" alt=\"whatsapp logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://instagram.com/shahram.shakibaa?igshid=MzNlNGNkZWQ4Mg==\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/instagram/default.svg\" width=\"52\" height=\"40\" alt=\"instagram logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://twitter.com/ShahramShakibaa\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/twitter/default.svg\" width=\"52\" height=\"40\" alt=\"twitter logo\"  /\u003e\n  \u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahramshakiba%2Fframer-motion-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahramshakiba%2Fframer-motion-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahramshakiba%2Fframer-motion-basic/lists"}