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

  
 

  

##  Find me around the Web