- Notifications
You must be signed in to change notification settings - Fork51
Flipping awesome animations.
License
davidkpiano/flipping
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A library (and collection of adapters) forimplementing FLIP transitions.
For more information about the FLIP technique, view the flipping slides:
- https://codepen.io/davidkpiano/pen/xLKBpM
- https://codepen.io/davidkpiano/pen/vmXErw
- https://codepen.io/davidkpiano/pen/xPVJwm
- https://codepen.io/davidkpiano/pen/RjaBpW
- https://codepen.io/davidkpiano/pen/zWrRye
npm install flipping@latest --saveOr grab the files directly:
- https://unpkg.com/flipping@latest/dist/flipping.js (core)
- https://unpkg.com/flipping@latest/dist/flipping.web.js (WAAPI adapter)
- 🔜https://unpkg.com/flipping@latest/dist/flipping.css.js (CSS adapter - WIP!)
In your HTML, add thedata-flip-key="..." attribute to shared elements (see HTML example below).
importFlippingfrom'flipping';constflipping=newFlipping();// Before a layout change happensflipping.read();// Any effect that changes the layoutdoSomething();// After a layout change happens// With an adapter, this will start the FLIP animationflipping.flip();
<!-- first view --><sectionclass="gallery"><divclass="photo-1"data-flip-key="photo-1"><imgsrc="/photo-1"/></div><divclass="photo-2"data-flip-key="photo-2"><imgsrc="/photo-2"/></div><divclass="photo-3"data-flip-key="photo-3"><imgsrc="/photo-3"/></div></section><!-- second view --><sectionclass="details"><divclass="photo"data-flip-key="photo-1"><imgsrc="/photo-1"/></div><pclass="description"> Lorem ipsum dolor sit amet...</p></section>
Creates a newFlipping instance. This is the thing that keeps track of all the changes made, and determines if any elements changed positions or size.
Parameters foroptions
For greater control and custom animations, you can pass in the following parameters (all optional):
selector?: (parent: Element) => Element[];- Selects all "flippable" elements. Defaults to all elements that have a[data-flip-key]attribute.activeSelector: (element) => Element[];- Selects the currently active "flippable" elements. Defaults to selecting the visible flippable elements.onFlip?: (state: IFlipStateMap) => void;- Event listener. Called with the entire state map of tracked flippable elements whenever.flip()is called.onRead?: (state: IFlipStateMap) => void;- Event listener. Called with the entire state map of tracked flippable elements whenever.read()is called.onEnter?: (state: IFlipStateMap) => void;- Event listener. Called with the state map of elements that enter (that is, not previously tracked).onLeave?: (state: IFlipStateMap) => void;- Event listener. Called with the state map of elements that leave (that is, previously tracked but no longer active).parent?: Element;- The root element to query all flippable elements. Defaults to the<body>.plugins?: FlipPlugin[];- An array of plugins that transform the state map before being emitted.duration?: number- Animation duration in ms. Defaults to 300.easing?: string- Easing function name e.g.ease-in-out. Defaults tocubic-bezier(.5, 0, .5, 1).
Queries all the flippable selectors and reads their bounds (position and size). This must be called before layout changes are made.
Will call anyonRead() event listeners with the entire state map.
Queries all the flippable selectors and reads their bounds (position and size), and then determines the deltas (changes in position and/or size)
Will call anyonFlip() event listeners with the entire state map.
- Calls
flipping.read() - Calls the wrapped
fn() - Returns the result of the wrapped
fn() - Calls
flipping.flip()
It's a nice shorthand. Use it.
HTML data-attribute that tracks the same/shared elements and identifies them as the "same" element.
HTML data-attribute that prevents the Flipping adapters from trying to applyscale() to a transformed element.
About
Flipping awesome animations.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.