Installations
npm install vue-flip-toolkitDeveloper
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
NPM Version
Statistics
315 Stars
44 Commits
17 Forks
7 Watching
17 Branches
4 Contributors
Updated on 04 Sept 2024
Bundle Size
27.81 kB
Minified
8.81 kB
Minified + Gzipped
Languages
Vue (83.56%)
JavaScript (15.76%)
HTML (0.69%)
Total Downloads
Cumulative downloads
Total Downloads
104,690
Last day
40.2%
136
Compared to previous day
Last week
13.4%
551
Compared to previous week
Last month
14.3%
2,176
Compared to previous month
Last year
25.5%
20,173
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
20
vue-flip-toolkit
A Vue.js port of the wonderful react-flip-toolkit, developed by @aholachek (to whom all credit is due here)
Quick Start
1yarn add vue-flip-toolkit
Wrap the components you wish to animate with a single Flipper component that has a flipKey prop. This prop must change every time you want an animation to happen.
Wrap elements that should be animated with Flipped components that have a flipId prop matching them across renders.
A basic example can be found here: https://codesandbox.io/s/m354w1mmp9
Why even port this to Vue.js?
Fair question. In developing my own library, vue-overdrive, I've felt the pain of not being able to find a declarative library for animating a given DOM element between two states. Upon discovering react-flip-toolkit, which has a first-class "core" API that can be used outside of React, I wanted to take a crack at using it to re-implement vue-overdrive. The fruit of my attempt is the following library, vue-flip-toolkit.
What's in this library?
This library strives to imitate its parent, react-flip-toolkit, as closely as possible. It thus exports the following two components that you can use in your Vue applications. For the sake of brevity, I've lifted descriptions/verbiage from the README of react-flip-toolkit, indicated via blockquotes.
Flipper.vue
The parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page. Read more –>
Props
| prop | default | type | details |
|---|---|---|---|
className | – | string | A class that will apply to the div rendered by Flipper |
flipKey (required) | – | string, number, boolean | Changing this tells vue-flip-toolkit to transition child elements wrapped in Flipped components. |
spring | "noWobble" | string, object | Provide a string or referencing one of the spring presets — noWobble, veryGentle, gentle, wobbly, or stiff. Otherwise, pass a custom spring object |
staggerConfig | {} | object | Provide configuration for staggered Flipped children. |
Flipped.vue
Wraps an element that should be animated.
Props
| prop | default | type | details |
|---|---|---|---|
flipId (required) | – | string | Use this to tell vue-flip-toolkit how elements should be matched across renders so they can be animated. |
inverseFlipId | – | string | Refer to the id of the parent Flipped container whose transform you want to cancel out. If this prop is provided, the Flipped component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided transform props and will ignore all other props (besides inverseFlipId.) |
stagger | – | string | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |
delayUntil | – | string | Delay an animation by providing a reference to another Flipped component that it should wait for before animating (the other Flipped component should have a stagger delay as that is the only use case in which this prop is necessary.) |
shouldInvert | – | function | A function provided with the current and previous decisionData props passed down by the Flipper component. Returns a boolean indicating whether to apply inverted transforms to all Flipped children that request it via an inverseFlipId. |
shouldFlip | – | function | A function provided with the current and previous decisionData props passed down by the Flipper component. Returns a boolean to indicate whether a Flipped component should animate at that particular moment or not. |
opacity | false | boolean | |
scale | false | boolean | Tween scaleX and scaleY |
translate | false | boolean | Tween translateX and translateY |
Events
| eventName | args | details |
|---|---|---|
| @on-start | {el: DOMElement, id: String} | Emitted when the flipped animation begins. |
| @on-complete | {el: DOMElement, id: String} | Emitted when the flipped animation begins. |
Cool, so how do I use it?
Install the library
1yarn add vue-flip-toolkit
Import the respective components.
1import { Flipper, Flipped } from "vue-flip-toolkit";
Register the components.
1// Example.vue 2<script> 3export default { 4 components: { 5 Flipped, 6 Flipper 7 } 8}; 9</script>
OK, time for some examples.
You got it.
1) Simple, Expanding Div Animation
2) Two Divs
3) List Shuffle Animation
4) List Shuffle Animation (Staggered)
5) Accordion (Staggered)
6) Scale Animation + Anime.js
7) Material Design inspired animation
8) Vue Router Example
This example is very much a WIP. Nonetheless, it illustrates at a high-level how to use vue-flip-toolkit with vue-router, as well as hook into the @on-complete and @on-start events.
What's next?
A lot.
Primarily, I want to make sure that this basic set of functionality works for Vue developers, and that the API makes sense.
Once we check that box, I'd like to add support for additional props for both Flipped and Flipper. Right now, you can't do too too much with them.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 3/18 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Reason
105 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-779f-wgxg-qr8f
- Warn: Project is vulnerable to: GHSA-ccrp-c664-8p4j
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-33vh-7x8q-mg35
- Warn: Project is vulnerable to: GHSA-79xf-67r4-q2jj
- Warn: Project is vulnerable to: GHSA-9pcf-h8q9-63f6
- Warn: Project is vulnerable to: GHSA-hcg3-56jf-x4vh
- Warn: Project is vulnerable to: GHSA-hrpq-r399-whgw
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
1.4
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More