The other sandboxes in this post will make use of a modal. If you start tinkering, and then see weird, ostensibly incorrect behavior, try refreshing the sandbox. This is cool, but can wreck havoc on animations. As you change the code, changes are usually reflected immediately. A few things to consider with these sandboxesĬode Sandbox uses hot reloading. Stay tuned to see how we can switch it off. It looks sharp when the content bounces down and into position, but less so when we’re sliding the content up. This is a result of that same bouncing effect. ![]() I’ll close this section by calling attention to the fact that, when you slide the content up in the demo above, you’ll likely see the content underneath it get a little jumpy at the very end. There’s documentation on this, but for the remainder of this post I’ll continue to use the full, non-shortcut syntax for the sake of keeping things as clear as possible. As you can see, the syntax isn’t the most terse, and so react-spring provides some shortcuts. Note also how I’m animating values inside of translate3d values. The spring algorithm is fully configurable, and it comes with a number of presets you can take off the shelf - the demo above uses the stiff, and gentle presets. Instead, it uses a more sophisticated algorithm that produces that spring-like effect, which will appear more natural. It doesn’t simply chop the value changing into N equal deltas that it applies over N equal delays. ![]() Whew, that was a ton of words! Here’s a working demo, showing everything we just covered in action.ĭid you notice how, when you slide down the content in the demo, it sort of bounces into place, like… a spring? That’s where the name comes from: react-spring interpolates our changing values using spring physics. Conversely, if you add an item, then quickly hit the remove button and the add button, the same item will begin to slide off, then abruptly stop in place, and slide right back to where it was. So, if you type in the input box then quickly hit the add button then the remove button, you’ll see the same item smoothly begin to enter, and then immediately, from whatever stage in the animation it’s at, begin to leave. In the demo below, the “Add item” button adds an item to the end of the list when clicked, and the “Remove last item” button removes the most recently added item from the list. Normally this would be a terrible idea, but for now, it lets us see the feature in action. In this case, I decided to tell react-spring that an item’s index in the array uniquely defines that item. Note the keys section: This allows us to tell react-spring how to identify objects in the list. We call the listTransitions function, provide a callback accepting a single styles object and a single item, and react-spring will call it for each item in the list with the right styles, based on whether it’s newly added, newly removed, or just sitting in the list. react-spring is tracking the list array, keeping tabs on the items which are added and removed. It’d look something like this: export default function App() ,Īs I alluded earlier, the return value, listTransitions, is a function. Let’s stop for a moment and consider how we’d switch opacity on and off without any kind of animation. Let’s consider the canonical “Hello world” of animation: fading content in and out. I’ll have a working demo at the end of this section, so don’t worry if things get a little confusing along the way. We’ll cover springs, height animation, and then transitions. ![]() react-spring reduxīefore we get to some interesting application use cases, let’s take a whirlwind intro. The only issue I’ve seen is a slight bug when used with concurrent mode, which can be tracked in the GitHub repo. If it’s not fully released by the time you read this, be sure to install it with From on what I’ve seen and from what the lead maintainer has told me, the code is incredibly stable. I’ll be using the newest version 9 which, as of this writing, is in release candidate status. While react-spring isn’t the only animation library for React, it’s one of the more popular (and better) ones. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first started out, then dive into some interesting use cases. Animation is one of the trickier things to get right with React.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |