Comments (4)
GeorgeBelanger
commented on May 31, 2024
Hmm I was pretty new to React spring and definitely didn't try - 30 - 30 so
probably no bug just user error!
…On Wed, Jul 3, 2019, 3:22 PM Wilson Wong ***@***.***> wrote:
Hey,
You say that react-spring was unable to get the cards to animate in and
out in opposite directions, but I changed the following and it seems to
work fine?
const cardsTransition = useTransition(visible ? items : [], item => item, {
ref: cardsRef,
config: config.stiff,
from: { opacity: 0, translateY: -30 },
enter: { opacity: 1, translateY: 0 },
leave: { opacity: 0, translateY: -30 }, // Change this to -30 from 30
trail: 400 / items.length,
unique: true,
reset: true
});
Was there a bug with this I'm not noticing or...?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#6?email_source=notifications&email_token=AD6YU7MFI5AEUCDXSE2UWKTP5T4ANA5CNFSM4H5I4J2KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G5GZIUA>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AD6YU7L6LKTE4OETD44AJWLP5T4ANANCNFSM4H5I4J2A>
.
from react-animation-comparison.
aholachek
commented on May 31, 2024
Hi @WilsonCWong, not sure what GeorgeBelanger's comment is referring to exactly but to clarify, I wanted group card behavior to differ from individual card behavior. Your update causes individual cards to fade-in-down rather than fade-in-up, which is what the test specifies.
So, as in the animejs example, the group of cards should animate in from the top, but individual cards should animate in from the bottom. I'm basically missing that ability to specify a difference between the entry/exit behavior of an individual element versus a staggered group of elements.
from react-animation-comparison.
aholachek
commented on May 31, 2024
Actually, now that I re-read the description, that intention definitely isn't clear, so I'll definitely edit the docs
from react-animation-comparison.
WilsonCWong
commented on May 31, 2024
@aholachek Ah, yeah, that makes it a lot more clear. Thanks for the comparisons btw, the examples are very helpful!
from react-animation-comparison.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-animation-comparison.