https://github.com/bahrus/be-flippant

Enhance an element with FLIP animation support
https://github.com/bahrus/be-flippant

Last synced: 3 months ago
JSON representation

Enhance an element with FLIP animation support

• Host: GitHub
• URL: https://github.com/bahrus/be-flippant
• Owner: bahrus
• License: mit
• Created: 2021-10-25T10:39:03.000Z (over 3 years ago)
• Default Branch: baseline
• Last Pushed: 2024-07-13T22:48:40.000Z (11 months ago)
• Last Synced: 2025-03-13T08:59:00.423Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 126 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# be-flippant (💫)

Use Case:

Our web page, or a part of our web page, consists of two "scenes".  There's some (button) element that enables switching from one scene to the other.  

In both scenes there is a "main character" (DOM element), that the user is meant to be drawn to.

We would like to gracefully switch from the first scene to the next scene, with the user's eye focused on that "main character", which should smoothly morph between the two scenes.

That's what be-flippant does.  Behind the scenes it uses some boring math to figure it all out, and some [mature api's](https://caniuse.com/web-animation) to make it happen, and some acronym or other to give it some buzz.

[![Playwright Tests](https://github.com/bahrus/be-flippant/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-flippant/actions/workflows/CI.yml)



Size of package, including custom element behavior framework (be-decorated):

[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-flippant?style=for-the-badge)](https://bundlephobia.com/result?p=be-flippant)

Size of new code in this package:



```html

    

         

    

    

        

    

    Switch Episodes

```