Introduction to Popmotion: Tween

Popmotion is a functional JavaScript animation library. Compared to other libraries like GreenSock or Anime.js, Popmotion is low-level and unopinionated.

It packs a ton of features, like spring physics and pointer tracking, into a very small filesize (11.5kb).

It allows developers to write their own features using simple functions, rather than waiting for the library author to add them.

It also means it's just as easy to animate 3D objects, charts or React components as it is to animate DOM or SVG elements.

This flexibility can make the initial learning curve steeper than for other libraries. So, in this tutorial series, we'll learn the basics of Popmotion's powerful animations. We'll start with the workhorse of the animation world, the tween.

Install

Popmotion supports a variety of installation methods. In production, I recommend installing via npm, as this allows you to import only the bits you need, saving space even further.

However, for this tutorial, you can follow along with this CodePen, which has been set up with the latest version of Popmotion.

Tween

For those unfamiliar, a tween transitions between one number and another over a predetermined length of time. If you've used a CSS transition, Popmotion's tween function works exactly the same.

We can import tween like so:

const { tween } = popmotion;

By default, tween animates between 0 and 1 over a duration of 300 milliseconds. If you open your console, you can test this yourself:

tween().start({
  update: v => console.log(v),
  complete: () => console.log('complete!')
});

But we don't want to animate the console—we want to animate the ball. For this, Popmotion includes another function, styler.

Note: In this first example, we defined both the update and complete functions. But if you provide start with only a single function, it will automatically assign it to update.

Styler

styler is used to create get/set interfaces for HTML and SVG styles optimised for use with animations (from any library!).

In the above example, tween is outputting a number, so we could of course set the ball's opacity like this (try it):

const ball = document.querySelector('.ball');

tween().start(v => ball.style.opacity = v);

However, styler has the following benefits:

  • Batches renders to prevent layout thrashing.
  • Renders, at most, once per frame.
  • Allows transform props to be set individually, allowing the independent animation of props like scale and translateX.
  • Unifies the CSS and SVG transform coordinate models.
  • Understands default value types, so you can set translateX (for instance) without appending 'px'.

You're also not limited to using it inside an animation. You could manually set an element's style while others are animating, and the change will be automatically scheduled and batched along with the others.

So let's import it:

const { tween, styler } = popmotion;

Create the ball styler:

const ballStyler = styler(ball);

Now we can use ballStyler to set and animate any of the ball's properties. ballStyler.set is flexible. It can set a single property:

ballStyler.set('background', '#f00');

Or multiple properties:

ballStyler.set({
  x: 100,
  y: 100
});

We want to animate opacity for now, so let's change our animation:

tween().start(v => ballStyler.set('opacity', v));

set can also be curried. By providing it just a property name, it will return a setter function for that prop. So we can neaten the above by writing:

tween().start(ballStyler.set('opacity'));

So far, we've only animated the ball using the default tween properties. Let's take a look at how versatile a tween can be.

Tween Props

tween accepts one optional argument, an object of tween properties. Let's take a look at some of the more commonly used props:

from/to

A tween can be between any two states. We define these with from and to.

Let's animate translateX by rewriting 'opacity' to 'x'. Then, pass from and to props:

tween({ from: 0, to: 300 })

Your ball now moves from left to right by 300px.

However, I said that a tween can be between two states, not just numbers. If we provide from and to objects of numbers and/or colors, we can animate multiple properties at once.

Try this:

tween({
  from: { x: 0, background: '#198FE3' },
  to: { x: 300, background: '#FF1C68' }
}).start(ballStyler.set);

This is an easy way to animate multiple props simultaneously.

Duration

duration is defined in milliseconds. By default, a tween will take 300ms, but if we set duration to 1000, it'll take a second:

tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

Easing

Easing functions are used in tweening to change the rate of movement throughout the animation.

In real life, objects don't start or stop at their target velocity. Depending on the object, they gradually speed up, or gradually slow down, or both.

An easing function simply works by taking the tween's progress, defined as a number between 0 and 1, and returning a new one.

You don't need to know how to make these functions because Popmotion provides a bunch for you.

Import them:

const { easing, tween, styler } = popmotion;

By default, ease is set to easing.easeOut. When a function eases out, it means it starts fast and ends slow.

This was chosen as default because it's my belief that most animation in user interfaces should initiate as a result of a user's action. By starting fast and ending slow, the user will feel as if they imparted their energy, via their tap or click, directly into the interface. It feels snappy, alive, and responsive.

For many animations away from the user's input, or on their own, it can feel a little less jarring to use an animation that eases in, like easing.easeInOut or easing.anticipate, which does a playful tug before animating.

Finally, there's the easing.cubicBezier function, which creates a new easing function based on an easing curve, just like CSS transitions. This provides a massive degree of control and flexibility over your motion.

Try applying some of these to your animation while playing around with duration to see how it affects the feel and character of it.

Repeating

Animations can be repeated in three different ways: loop, yoyo, and flip.

Loop starts the animation from the start. Yoyo mirrors the tween by running it backwards. And flip runs it backwards and flips the easing function.

One of these can be set per tween, and each is set as a number that denotes the number of times to repeat the animation. To repeat forever, simply pass Infinity:

tween({
  yoyo: Infinity,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

Playback 

When a tween is started, it returns playback controls that we can use to control that animation.

const controls = tween().start(console.log);

In the above example, controls will have access to all of these playback methods, like stop, pause, and resume:

const controls = tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

setTimeout(() => controls.stop(), 500);

We can use these playback controls to pause and then seek through the tween:

const controls = tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

controls.pause();
controls.seek(0.5);

With this, we can create a scrubbable animation! In a later tutorial, we'll explore how to use Popmotion's pointer function to create a scrub bar, but for now you can scrub one tween with a second tween, to see this in action:

const controls = tween({
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

controls.pause();

tween({ duration: 1000 })
  .start(controls.seek);

Keyframes

For simple, a-to-b transitions, tween is excellent. For more complicated sequences of tweens, Popmotion provides another function called keyframes.

Let's import it now:

const { keyframes, easing, tween, styler } = popmotion;

keyframes tweens through a linear series of states. We provide these states to its values property:

keyframes({
  values: [0, -150, 150, 0],
  duration: 2000
}).start(ballStyler.set('x'));

Like tween, we can also define these states as objects. So to move the ball around in a square, we can write:

keyframes({
  values: [
    { x: 0, y: 0 },
    { x: -150, y: -150 },
    { x: -150, y: 150 },
    { x: 150, y: 150 },
    { x: 150, y: -150 },
    { x: 0, y: 0 }
  ],
  duration: 2000
}).start(ballStyler.set);

By default, keyframes will allocate each of these tweens an equal share of the overall duration.

By providing a times array, we can mark each of these states with a number between 0 and 1. 0 represents the start of the animation, and 1 represents the end:

keyframes({
  values: [0, -150, 150, 0],
  times: [0, 0.1, 0.9, 1],
  duration: 2000
}).start(ballStyler.set('x'));

This way, we can adjust the length of the animation without having to remark each individual segment.

It also allows each animation to be given an individual easing with the easings property:

keyframes({
  values: [0, -150, 150, 0],
  times: [0, 0.1, 0.9, 1],
  easings: [easing.easeIn, easing.linear, easing.easeOut],
  duration: 2000
}).start(ballStyler.set('x'));

Because keyframes is just a tween, we can adjust its overall playback with all the same properties like ease and loop, and control it with all the same methods that we learned earlier.

Conclusion

The tween and keyframes functions allow you to create both simple and complex animations.

styler brings its own benefits, like usage outside of animations, standardisation of CSS and SVG transform models, and render batching for high animation performance.

In this tutorial, we've covered just a couple of the animations that Popmotion offers. In the next installment, we're going to explore pointer tracking and velocity-based animations like physics and spring.

Velocity-based animations can be used to create natural-feeling UIs that react realistically to a user's input. See you there!



from Envato Tuts+ Tutorials

Comments

Post a Comment

Popular posts from this blog

How to Build Self-Confidence: 10+ Steps to Improve Your Self-Esteem

Image
Do you have friends who can walk up to someone at a party and they’d instantly hit it off? These are the people who often get free drinks, invites to cool events, and make new friends whenever they go out. You can gain confidence in yourself and improve different aspects of your life. (Image source:  Envato Elements ) Meanwhile, there are people who feel anxious in almost every social encounter. Their first day on a job, a big company meeting, and even a housewarming party all make them feel vulnerable and unsure of themselves. Questions like the following often spring to mind during these events:  “ What will I say? ”  “Who do I talk to?” “ What will I do if there’s an awkward silence? ”  While social awkwardness is common, it’s not a lifetime thing. You can learn how to build self-confidence that doesn’t feel forced or unnatural. You can still be yourself and have the self-confidence to try new things, meet new people, and all the benefits that come with...
Read more

Best of 2020: Great Landing Pages for Design Inspiration (Showcase Examples)

Image
A great landing page design is crucial when it comes to announcing new products or services as well as the launch of your company. Great landing pages help visitors focus on a singular action. That makes them great for driving conversions and signups. Zimed is one of our best landing page design examples on Envato Elements. Nowadays, you don’t have to be a web design expert to create a landing page. There's no shortage of  quality landing page samples on various marketplaces so all you need to do is find the one you like, buy it, and set it up. That's why we've set up this landing page showcase. In today's post, we'll share our best landing page examples from Envato Elements and ThemeForest. Find Great Landing Page Design Examples on Envato Elements for 2020 Envato Elements is a great starting point when it comes to the best  landing page design . Envato Elements is a subscription-based marketplace with dozens of landing page templates. When you start bro...
Read more

18+ Best Free PowerPoint Puzzle Pieces Templates (Infographic PPT Slides)

Image
Many people are visual learners. The population of visual learners is why it helps to use visual infographics to explain an idea in your PowerPoint presentation.  One of the best examples is using a PowerPoint puzzle pieces template.  Each piece of the puzzle can fit together into a singular idea. Templates like the premium  PANDAWA  template have all the PowerPoint puzzle pieces you need to explain a complex idea. Using a PowerPoint puzzle pieces will help you explain concepts more clearly. You can quickly and easily change professionally designed PowerPoint puzzles to fit your needs. This round-up will show you some of the best free PowerPoint puzzle templates. You'll also see top PowerPoint puzzle pieces templates from Envato Elements, and more puzzle pieces templates from GraphicRiver. Download the Best PowerPoint Puzzle Templates From Envato Elements Later in this tutorial, you'll see free template options. But for now, let's focus on the bes...
Read more