https://github.com/jhojanggarcia/popplylibrary

Components about animations and Effects for your website. ✨
https://github.com/jhojanggarcia/popplylibrary

animations-css nextjs react tooltip-library tooltips ui

Last synced: 29 days ago
JSON representation

Components about animations and Effects for your website. ✨

• Host: GitHub
• URL: https://github.com/jhojanggarcia/popplylibrary
• Owner: JhojanGgarcia
• Created: 2024-05-30T06:44:17.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2024-07-31T15:17:42.000Z (10 months ago)
• Last Synced: 2024-08-01T01:57:20.896Z (10 months ago)
• Topics: animations-css, nextjs, react, tooltip-library, tooltips, ui
• Language: JavaScript
• Homepage: https://popply-library.vercel.app
• Size: 2.27 MB
• Stars: 21
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


Welcome to **Popply**, a refined animation library for tooltips—those subtle yet powerful UI elements that enhance user guidance and interaction.

Tooltips are typically activated by a `mouseEnter` event. With **Popply**, bringing them to life is seamless and efficient.  

Simply copy the desired animation, place it into your `./styles` folder, and apply it to any tooltip that could use a touch of motion.

Explore a curated collection of **50+ animations**, including `fadeIn`, `slideIn`, `flyIn`, `punchIn`, `zoomIn`, and many others—each designed to complement your user experience with precision.

Start exploring and find the animation that best aligns with your design vision.

# Preview 

By default, **Popply** animations are adaptive, this ensures smooth performance on all devices.  

However, tooltips often behave differently on desktop (hovering) and mobile (tapping), so it is important to preview them in both contexts.



On mobile, consider triggering tooltips via ```onClick```, or accessibility-focused interactions.  



> [!IMPORTANT]

> **Popply** is a free and open source project.

> If you find it useful, please consider [donating](https://buymeacoffee.com/jhojanggar6).