davidkpiano / flipping Goto Github PK
View Code? Open in Web Editor NEWFlipping awesome animations.
License: MIT License
Flipping awesome animations.
License: MIT License
Hi, I recently tried to use Flipping in a project scaffolded with create-react-app but could not import Flipping due to the following error:
TypeError: mitt is not a constructor
on line 74 of Flipping.js
Any advice? It seems like others have encountered this issue with mitt
I'm wondering if you had any experience or examples to add this to nuxt page transitions.
Hi! ๐ I'm not sure if this is a bug or just a user error on my part. I think it'll be easier to show you than to explain it:
Basically, each grid item has a unique data-flip-key
value. When you click on an item, the details page will have only that items key on the larger image. Any thoughts? ๐ค
Unless I'm missing something, it seems like onEnter is no longer valid (and my guess is there are other invalid documented options in the README as well). Is there a new way to customize entry / exit animations?
Why is flip animation not working in this example with simple dom-manipulation via appendChild
https://codepen.io/monochromer/pen/rRMLda?editors=0011
<img src="image.jpg" data-flip-key="image" />
var f = window.f = new Flipping();
var image = document.querySelector('.image');
var grid = document.querySelector('.grid');
grid.onclick = (e) => {
var gridCell = e.target.closest('.grid__cell');
if (!gridCell) return;
f.read();
gridCell.appendChild(image);
f.flip();
}
I might be trying to do something slightly out of scope; I'm not sure if I'm exposing a gap in the implementation logic or if what I'm trying to do doesn't make sense (or I just have a bug somewhere else of course). In this example, I am using a Flipping with all-default options. I'm using solidjs, and sandwiching my signal setter with read() and update().
I'm trying to do shared element transitions with changing parent-child relations. The discrepancy in expectation arises when in the specific case when I have a parent and child element, which both flip, but in the new state, the child has a different parent. In such cases, the child either skips the transition entirely, or has an unexpected starting position.
To illustrate what I expect, here I have disabled the flip keys on the parents, so only children are flipping. Here, all children (emojis) proceed to their correct positions:
https://imgur.com/a/chlXRmv
On the other hand, when I enable the parent flip keys as well, something more complicated happens. The parent + node, and the tooth, which has the same parent in both the inital and final states, both behave as-expected. However, the mushroom transitions with unexpected initial position, and the space invader does not transition at all:
https://imgur.com/a/n7LQ1C6
Any idea as to what's happening?
Thanks for the wonderful library! How does one tweak the animation in play, such as easing/spring parameters, duration, etc.?
I'm trying to replace isotope on my site for a grid of employees, and since replacing category filtering and instant search is pretty easy (I'm using vanilla js without libraries, only StimulusJS for structure), I just need something for the animation that happens when repositioning on filtering. In researching this, I found your css-tricks article and then a codepen demo that uses this library for filtering with categories. I forked that demo, and got to an implementation I can use in my application.
So far, so good. Now to get it into my app. But when doing proper importing, I can't get it to work. The pens were using the internal codepen "Add External Scripts" method with both the regular dist file and the web adapter with unpkg, which isn't an alternative for me in my app.
Here's what I've tried:
yarn add flipping
(defaults to 1.1.0)
import Flipping from 'flipping'
(fails silently; no console error but no animation either)import { Flipping } from 'flipping'
(Uncaught SyntaxError: import not found: Flipping)import Flipping from 'flipping/dist/flipping.web'
(require
(none work)yarn add flipping@next
(version 2.0.0-3)
import Flipping from 'flipping'
(SyntaxError: import not found: default)import { Flipping } from 'flipping'
(fails silently; no console error but no animation either)import Flipping from 'flipping/dist/flipping.web'
(adapter doesn't exist in version 2)import Flipping from 'flipping/dist/flipping'
(really long TypeError message)I've also tried various tricks for using import when the library doesn't really support it, like this method: FredKSchott/snowpack#2338. Didn't work.
Importing the web adapter almost works, but only one element is animated when repositioning. This is not like the codepen, where all elements slide nicely into their new positions. I assume something from the main lib is missing since only the adapter is imported? EDIT: It works, I had a syntax error in my HTML
Any ideas to fix this? I'm very happy with this library the way it works in the codepen demo, so I'd love to use this instead of rolling my own. Thanks! :)
PS: I'm using snowpack now, if it matters, but I couldn't get it to work with webpack either.
Hi,
Great work but can't seem to get this working in Firefox OSX, get the above error in the console.
Works fine on Chrome / others.
Hi @davidkpiano ! First off, really like your work.
Just wanted to bring to your attention the vulnerabilities warning I'm getting when cloning and npm i
ing the repo:
found 91 vulnerabilities (2 low, 2 moderate, 86 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
I've already been leveraging flipping.js for basic transitions, but the examples are neat! Any elaboration to help understand how they work / how they use flipping.js would be amazing.
This project seems very dead, are there any viable alternatives?
just trying to use Flipping with React as outlined in this article: https://css-tricks.com/animating-layouts-with-the-flip-technique/
the versions of mitt and flipping all seem to check out, im not sure what i am missing here to be honest. just reporting this as it seems something broke along the way
(Posting this for anyone who gets stuck in the future like I did.)
Hello, the docs mention these 3 files:
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!)
I was stuck for a while when my animation wasn't working. Eventually I realized it's because I was using flipping.js when I should have been using flipping.css.js. I assumed that flipping.js was the main one I needed. Of course I am aware that they are CSS based animations but I still veered away from flipping.css.js because it sounded like something experimental/beta. But for people making browser-based animations I guess .css.js is the one that's needed? (Not sure what the other 2 are used for? Maybe would be good to clarify for people who might encounter this issue in the future?)
For example, the expand.html
example just flips states without animation.
In the console I got.
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at clone (file:///path/to/examples/expand.html:102:22)
at flipping.onFlip.stateMap (file:///path/to/examples/expand.html:145:31)
at file:///path/to/node_modules/flipping/dist/flipping.js:1:9988
at Array.map (native)
at Object.emit (file:///path/to/node_modules/flipping/dist/flipping.js:1:9972)
at t.dispatch (file:///path/to/node_modules/flipping/dist/flipping.js:1:4374)
at t.flip (file:///path/to/node_modules/flipping/dist/flipping.js:1:5696)
at HTMLBodyElement.<anonymous> (file:///path/to/node_modules/flipping/dist/flipping.js:1:5962)
clone @ expand.html:102
flipping.onFlip.stateMap @ expand.html:145
(anonymous) @ flipping.js:1
emit @ flipping.js:1
t.dispatch @ flipping.js:1
t.flip @ flipping.js:1
(anonymous) @ flipping.js:1
I have adjusted the path to go to the current library's version installed node_modules/
, if that might be part of the issue.
Hello David, thank you for all the great explanations and examples on the FLIP animations.
Thought you'd be interested in knowing that we've been iterating on a Mithril component that helps with the FLIP approach and your material has been really helpful.
Here's a couple examples:
import Flipping from 'flipping/lib/adapters/css';
const flipping = new Flipping({ duration: 300, easing: 'ease' });
Duration and easing are set to value passed in Flipping constructor.
Duration is hard coded to 0.6s and easing is not set.
Hi,
I'm working in a TypeScript project with webpack.
I stumbled across this post [https://css-tricks.com/animating-layouts-with-the-flip-technique/] and decided to try your library. In your example, you use this import syntax:
import Flipping from 'flipping/adapters/web';
Unfortunately, this doesn't work (I'm using the latest version, 1.1.0). The only way I found for importing the Web Adapter is this, which feels unnatural:
import Flipping from 'flipping/lib/adapters/web';
This works, but the editor complains about that file not having a default export.
I think that with some minor changes to your project structure/configuration we should be able to use the syntax you used in that article, let me know if I'm doing something wrong :) Cheers!
Specifically, the "examples" npm script won't find any scss.
npm start & node-sass -w examples/scss -o examples/css
(I liked your articles, I found your technique very smart, I'm here to discover more about it)
I'm working on a react app written in typescript, based on create-react-app
with react-scripts-ts
.
Trying to import this library, i failed miserably.
import Flipping from 'flipping'
import * as Flipping from 'flipping'
import Flippin = require('flipping')
I would really like to test this library, but i'm rather new to typescript and really struggling with this. What can i do - preferrably without changing my typescript settings?
My tsconfig.json
settings are
{
"module": "esnext",
"target": "es5"
}
Hello,
I'm trying to knock together a nice little animated dropdown menu thing. Thought i'd give your library a little play, it sounds super sweet!
Anyhow... Am I going horribly wrong or is this the expected behaviour for toggling
display: block < > none;
https://codepen.io/magicspon/pen/NXXoOp?editors=0011
// see comments at the end of the code.
cheers
Uncaught TypeError: Cannot read property 'parentElement' of undefined
at t.flip (flipping.web.js:1)
I get this every time I use the library and call flip() - no matter which js file I pick.
I looked at the source code, and it compiles to lines including these:
t.prototype.flip = function(t) {
var e = this;
void 0 === t && (t = {});
var n = t.parent || this.parentElement
, r = this.selectActive(n)
, i = {};
return r.forEach(function(t, r) {
var o = t.getAttribute(e.attribute);
That this.parentElement
call is the problem. In every browser I've tried, this
was undefined there, and you cant get the .parentElement
of undefined.
The error message varies, but it's always about this
...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.