Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/framer-motion-basic
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)
https://github.com/shahramshakiba/framer-motion-basic
animations-css framer-motion
Last synced: about 1 month ago
JSON representation
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)
- Host: GitHub
- URL: https://github.com/shahramshakiba/framer-motion-basic
- Owner: ShahramShakiba
- Created: 2024-04-16T09:39:48.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-04-17T20:33:40.000Z (10 months ago)
- Last Synced: 2024-11-16T03:16:15.787Z (3 months ago)
- Topics: animations-css, framer-motion
- Language: JavaScript
- Homepage: https://framer-motion-challenges-shahram.netlify.app/
- Size: 2.1 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#
 Framer Motion
###
 _Description_
> ### _Framer Motion_ is a popular open-source library for creating fluid animations and interactive user interfaces in React applications.
- It provides a simple and intuitive API for defining animations, transitions, and gestures, making it easier for developers to bring their designs to life.
> [!IMPORTANT]
>> #### Key Features & Benefits :
####Â _Declarative Syntax_
- Allows you to describe animations in a clear and concise manner.
####Â _Provides a range of built-in animation controls_
- Giving you more flexibility in creating dynamic and engaging user interactions.***
###
 _React Challenges_
![]()
- #### In this project, my primary objective is on utilizing ` Framer Motion ` to animate React Apps effectively, enhancing user engagement and interactivity on the website.
- 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.
> _Which Concepts in Have I Covered_:
####
 _Vanilla CSS_
- Animating with CSS Transitions
- Animating with CSS Animations
####Â _Building More Complex Animation with Framer Motion_
- _Install_: ` npm install framer-motion `
- Animating Between _Conditional Values_
- Adding Entry Animations with _` initial `_
- Reusing Animation States with _` variants `_
- Nested Animations with Variants in _Child-Component_
- Animating Staggered Lists with _` staggerChildren `_
- Re-triggering Animations via _Keys_
####Â _Animating Elements In & Out_
- Animating Element Disappearances Removal
- Making Elements Pop With Hover Animations using ` whileHover `
- Animating Shared Elements
####Â _Scroll-based Animation_
- Scroll-based Animations with ` useScroll() ` and ` useTransform() ` Hooks
#### _Give it a go in real-time and give me a Star_ Â
 _React Challenges_
https://github.com/ShahramShakiba/Framer-Motion-Basic/assets/110089830/b1276d95-c433-4dbf-8322-9fb38b0a0c42