Welcome back to the Introduction to Popmotion tutorial series. In part 1, we discovered how to use tweens and keyframes to make precise, time-scheduled animations.
In Part 2, we’re going to look at pointer tracking and velocity-based animations.
Pointer tracking allows us to create scrollable product shelves, custom value sliders, or drag-and-drop interfaces.
Velocity-based animations are different to a time-based animation like tween in that the primary property that affects how the animation behaves is velocity. The animation itself might take any amount of time.
We’ll look at the three velocity-based animations in Popmotion, spring, decay, and physics. We’ll use the velocity of the pointer tracking animation to start these animations, and that’ll demonstrate how velocity-based animations can create engaging and playful UIs in a way that time-based animations simply can’t.
First, open this CodePen to play along.
Pointer Tracking
Popmotion provides the pointer function to track and output the coordinates of either a mouse or single touch pointer.
Let’s import this along with styler, which will allow us to set the position of the ball.
const { pointer, styler } = popmotion;
const ball = document.querySelector('.ball');
const ballStyler = styler(ball);
For this example, we want to drag the ball. Let’s add an event that will output the pointer’s position to the ball:
let pointerTracker;
const startTracking = () => {
pointerTracker = pointer().start(ballStyler.set);
};
ball.addEventListener('mousedown', startTracking);
ball.addEventListener('touchstart', startTracking);
We’ll also want some code to stop tracking when we release the ball:
const stopTracking = () => pointerTracker && pointerTracker.stop();
document.addEventListener('mouseup', stopTracking);
document.addEventListener('touchend', stopTracking);
If you try and drag the ball now, there’s an obvious problem. The ball jumps away when we touch it! Not a great user experience.
This is because, by default, pointer outputs the pointer’s position relative to the page.
To output the pointer’s position relative to another point, in this case the ball’s x/y transform, we can simply pass that position to pointer like this:
const startTracking = () => {
pointerTracker = pointer({
x: ballStyler.get('x'),
y: ballStyler.get('y')
}).start(ballStyler.set);
};
Now you’ve made the ball, in very few lines of code, draggable! However, when the user releases the ball, it stops dead.
This isn’t satisfying: Imagine a scrollable carousel of products that a user can drag to scroll. If it just stopped dead instead of momentum scrolling, it’d be less pleasurable to use.
It’d be harder, too, because the overall physical effort needed to scroll the carousel would be higher.
To enable animations like this, we first need to know the velocity of the object being thrown.
Track Velocity
Popmotion provides a function that can help us track velocity. It’s called value. Let’s import that:
const { pointer, styler, value } = popmotion;
To speak technically for a moment, all of Popmotion’s animations are known as actions. Actions are reactive streams of values that can be started and stopped.
A value is, conversely, a reaction. It can’t be stopped or started. It just passively responds when its update method is called. It can keep track of values and can be used to query their velocity.
So, after we define ballStyler, let’s define a new value for ballXY:
const ballXY = value({ x: 0, y: 0 });
Whenever ballXY updates, we want to update ballStyler. We can pass a second argument to value, a function that will run whenever ballXY updates:
const ballXY = value({ x: 0, y: 0 }, ballStyler.set);
Now we can rewrite our pointer to update ballXY instead of ballStyler.set:
const startTracking = () => {
pointer(ballXY.get())
.start(ballXY);
};
Now, at any pointer, we can call ballXY.getVelocity() and we’ll receive the velocities of both x and y, ready to plug into our velocity-based animations.
Velocity-Based Animations
spring
The first velocity-based animation to introduce is spring. It’s based on the same equations that govern Apple’s CASpringAnimation, the spring animation behind all that iOS springy playfulness.
Import:
const { pointer, spring, styler, value } = popmotion;
Now, amend stopTracking so that instead of stopping the pointerTracker animation, it starts a spring animation like this:
const stopTracking = () => spring({
from: ballXY.get(),
velocity: ballXY.getVelocity(),
to: 0,
stiffness: 100,
damping: 20
}).start(ballXY);
We provide it with the ball’s current position, its velocity, and a target, and the simulation is run. It changes depending on how the user has thrown the ball.
The cool thing about springs is they’re expressive. By adjusting the mass, stiffness and damping properties, you can end up with radically different spring-feels.
For instance, if you only change the stiffness above to 1000, you can create a motion that feels like high-energy snapping. Then, by changing mass to 20, you create motion that looks almost like gravity.
There’s a combination that will feel right and satisfying for your users, and appropriate to your brand, under almost any circumstance. By playing with different spring-feels, you can communicate different feelings, like a strict out-of-bounds snap or a softer affirmative bounce.
decay
The decay animation, as the name suggests, decays the provided velocity so that the animation gradually slows to a complete stop.
This can be used to create the momentum scrolling effect found on smartphones, like this:
Import the decay function:
const { decay, pointer, spring, styler, value } = popmotion;
And replace the stopTracking function with the following:
const stopTracking = () => decay({
from: ballXY.get(),
velocity: ballXY.getVelocity()
}).start(ballXY);
decay automatically calculates a new target based on the provided from and velocity props.
It’s possible to adjust the feel of the deceleration by messing with the props outlined in the docs linked above but, unlike spring and physics, decay is designed to work out of the box.
physics
Finally, we have the physics animation. This is Popmotion’s Swiss Army knife of velocity-based animations. With it, you can simulate:
- constant velocity
- acceleration
- springs
- friction
spring and decay offer super-precise motion and a wider variety of “feels”. Soon, they’ll both also be scrubbable.
But both are immutable. Once you’ve started either, their properties are set in stone. Perfect for when we want to start an animation based on the initial from/velocity state, but not so good if we want ongoing interaction.
physics, instead, is an integrated simulation closer to that of a video game. It works by, once per frame, taking the current state and then modifying it based on the current properties at that point in time.
This allows it to be mutable, which means we can change those properties, which then changes the outcome of the simulation.
To demonstrate this, let’s make a twist on classic pointer smoothing, with elastic smoothing.
Import physics:
const { pointer, spring, physics, styler, value } = popmotion;
This time, we’re going to change the startTracking function. Instead of changing ballXY with pointer, we’ll use physics:
const startTracking = () => {
const physicsAnimation = physics({
from: ballXY.get(),
to: ballXY.get(),
velocity: ballXY.getVelocity(),
restSpeed: false,
friction: 0.6,
springStrength: 400
}).start(ballXY);
};
Here, we’re setting from and velocity as normal. friction and springStrength both adjust the properties of the spring.
restSpeed: false overrides the default behaviour of the animation stopping when motion stops. We want to stop it manually in stopTracking.
On its own, this animation won’t do anything because we set to, the spring’s target, to the same as from. So let’s reimplement the pointer tracking this time to change the spring target of physics. On the last line of startTracking, add:
pointerTracker = pointer(ballXY.get()).start((v) => {
physicsAnimation.setSpringTarget(v);
});
Here, we’re using a similar pointer animation as before. Except this time, we’re using it to change the target of another animation. In doing so, we create this elasticated pointer tracking:
Conclusion
Velocity-based animations paired with pointer tracking can create engaging and playful interfaces.
spring can be used to create a wide-variety of spring-feels, while decay is specifically tailored for momentum scroll animations. physics is more limited than either in terms of configurability, but also provides the opportunity to change the simulation in progress, opening new interaction possibilities.
In the next and final part of this introductory series on Popmotion, we’re going to take everything we’ve learned in the first two parts and use them along with some light functional composition to create a scrubbable animation, along with a scrubber to do the scrubbing with!
Powered by WPeMatico
