Announcing branching in beta.

Have you ever noticed how smooth and delightful animations look on a well-made, professional project? I am reminded of the In Pieces website where animations are used not just for decoration, but they also convey the message about the endangered species in an impactful way. Not only is the animation design and style beautiful, but they also flow nicely and harmoniously. It is precisely that flow in combination with the design and presentation which makes the animation look stunning and natural. That is the power of easing functions, which are also called timing functions.

Animation duration determines the amount of time for the animation to go from the first keyframe to the last. The following graph shows the connection between the animation keyframes and duration.

There are many ways in which animation can progress between two keyframes. For example, animation can have a constant speed or it can move quickly at the start and slow down near the end, or move slowly at the start and then speed up until it reaches the end, etc. This rate, or speed is defined with the easing functions (timing functions). If we take a look at the previous graph, the easing function is represented by the shape of the line connecting the two points. We’ve used the linear function (straight line) for the previous example, but we can also use a curve to connect the keyframes.

As you can see, there are lots of possible options and variations for animation easing functions and we’ll take a look at them next.
Types Of Easing Functions
There are three main types of easing functions that can be used in CSS:

Linear functions (linear),
Cubic Bézier functions (includes ease, ease-in, ease-out and ease-in-out),
Staircase functions (steps).

Linear Functions
We’ve covered linear functions in one of the previous examples, so let’s do a quick recap. With the linear timing function, the animation is going through the keyframes at a constant speed. As you might already know, the linear timing function can be easily set in CSS by using the linear keyword.

This is because the first (P0) and last points (P3) are fixed to the start (initial animation state) and the end (final animation state) of the curve, as the animation needs to end on a specified keyframe and within the specified duration. With the two remaining points (P1 and P2), we can fine-tune the curve and easing of the function, resulting with non-linear animation speed.
cubic-bezier(x1, y1, x2, y2)

X coordinates (x1 and x2) represent time ratio and are limited to values between 0 and 1 (the animation cannot begin sooner or last longer than specified), while Y coordinates (y1 and y2) represent the animation output and their values, which are usually set somewhere between 0 and 1 but are not limited to that range. We can use the y1 and y2 values that are outside the 0 and 1 range to create bouncing effects.

If the animation consists of several keyframes, defined in CSS @keyframes property, the easing function will be applied to each curve between the two points. If we are applying ease-out function to an animation with 3 keyframes, the animation will accelerate at the start of the first keyframe, and decelerate near the second keyframe and the same motion will be repeated for the next pair of keyframes (second keyframe and the last keyframe).

The following example showcases how various jump terms affect the animation behavior. Various jump terms are applied to the 5-step animation with the same duration.

Chrome, Safari and Firefox also offer a dedicated Animations tab in developer tools that offers a more detailed overview, including animation properties, duration, timeline, keyframes, delay, etc.

Useful Tools And Websites
There are plenty of useful online resources and easing presets that can give much more variety to easing functions.
More popular online resources include Easing Functions Cheat Sheet by Andrey Sitnik and Ivan Solovev and CSS Easing Animation Tool by Matthew Lein. These tools offer a wide range of presets that you can use as a foundation for your easing function and then fine-tune the curve to fit your animation timeline.

Animations & Accessibility
When working with easing functions and animations in general, it’s important to address accessibility requirements. Some people prefer browsing the web with reduced motion, so we should provide a proper fallback. This can be easily done with widely-supported prefers-reduced-motion media query. This media query allows us to either remove the animation or assign a different animation based on user preference.
.animated-element {
animation: /* Regular animation */;
}

@media (prefers-reduced-motion) {
.animated-element {
/* Accessible animation with reduced motion */
}
}

I’ve modified an analog clock example by Alvaro Montoro to include alternative animation for users with prefers-reduced-motion flag set.
See the Pen CSS Analog Clock with prefers reduced motion by Adrian Bece.
On a default animation, the seconds hand of the clock is constantly moving which may cause difficulties for some users. We can easily make the animation much more accessible by changing the animation timing function to steps. In the following example, users with prefers-reduced-motion flag set will be displayed an animation where seconds arm ticks every five seconds.
@media (prefers-reduced-motion) {
.arm.second {
animation-timing-function: steps(12);
}
}

Conclusion
Easing functions, or timing functions, change the animation’s look and feel by affecting the animation rate (speed). Easing functions enable us to create animations that resemble natural motion which can result in improved, more delightful UX and having a better impression on the users. We’ve seen how we can use pre-defined values like linear, ease-out, ease, etc. to quickly add a timing function and how to create custom easing functions with cubic-bezier function for more impressive and impactful animations. We’ve also covered staircase functions that can be used to create “ticking” animation and are rarely used. When creating animations, it’s important to keep accessibility in mind and provide an alternative, less distracting animations with less motion to users with prefers-reduced-motion flag set.
There are plenty of browser and online tools that can simplify and streamline creating custom easing functions, so creating animations with a beautiful flow is easier than ever. If you haven’t done so already, I would recommend experimenting with various easing functions and creating your own easing function library.
References

, MDN Web Docs
“Work With Animations,” MDN Web Docs
“Web Animations In Safari 13.1,” Antoine Quint, WebKit
“The Basics Of Easing,” Paul Lewis, Web Fundamentals, Google Developers
“Inspect Animations,” Kayce Basques, Chrome DevTools, Chrome Developers

Figma is Shopify’s default tool for product design and prototyping. Explore 9 utility plugins developed to work even more effectively.

I recently redesigned my personal website to include a fun effect in the hero area, where the user’s cursor movement reveals alternative styling on the title and background, reminiscent of a spotlight. In this article we’ll walk through how the effect was created, using masks, CSS custom properties and much more.

Duplicating the content

We start with HTML to create two identical hero sections, with the title repeated.

Welcome to my website

Welcome to my website

Duplicating content isn’t a great experience for someone accessing the website using a screenreader. In order to prevent screenreaders announcing it twice, we can use aria-hidden=”true” on the second component. The second component is absolute-positioned with CSS to completely cover the first.

The two sections with the same content are layered one on top of the other

Using pointer-events: none on the second component ensures that the text of the first will be selectable by users.

Styling

Now we can add some CSS to style the two components. I deliberately chose a bright, rich gradient for the “revealed” background, in contrast to the dark monochrome of the initial view.

Somewhat counterintuitively, the component with the bright background is actually the one that will cover the other. In a moment we’ll add the mask, so that parts of it will be hidden — which is what gives the impression of it being underneath.

Text effects

There are a couple of different text effects at play in this component. The first applies to the bright text on the dark background. This uses -webkit-text-stroke, a non-standard CSS property that is nonetheless supported in all modern browsers. It allows us to outline our text, and works great with bold, chunky fonts like the one we’re using here. It requires a prefix in all browsers, and can be used as shorthand for -webkit-stroke-width and -webkit-stroke-color.

In order to get the “glow” effect, we can set the text color to a transparent value and use the CSS drop-shadow filter with the same color value. (We’re using a CSS custom property for the color in this example):

.heading {
-webkit-text-stroke: 2px var(–primary);
color: transparent;
filter: drop-shadow(0 0 .35rem var(–primary));
}

See the Pen Outlined text by Michelle Barker (@michellebarker) on CodePen.dark

The text on the colored panel has a different effect applied. The intention was, for it to feel a little like an x-ray revealing the skeleton underneath. The text fill has a dotted pattern, which is created using a repeated radial gradient. To get this effect on the text, we in fact apply it to the background of the element, and use background-clip: text, which also requires a prefix in most browsers (at the time of writing). Again, we need to set the text color to a transparent value in order to see the result of the background-clip property:

.hero–secondary .heading {
background: radial-gradient(circle at center, white .11rem, transparent 0);
background-size: .4rem .4rem;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

See the Pen Dotted text by Michelle Barker (@michellebarker) on CodePen.dark

Creating the spotlight

We have two choices when it comes to creating the spotlight effect with CSS: clip-path and mask-image. These can produce very similar effects, but with some important differences.

Clipping

We can think of clipping a shape with clip-path as a bit like cutting it out with scissors. This is ideal for shapes with clean lines. In this case, we could create a circle shape for our spotlight, using the circle() function:

.hero–secondary {
–clip: circle(20% at 70%);
-webkit-clip-path: var(–clip);
clip-path: var(–clip);
}

(clip-path still needs to be prefixed in Safari, so I like to use a custom property for this.)

clip-path can also take an ellipse, polygon, SVG path or a URL with an SVG path ID.

See the Pen Hero with clip-path by Michelle Barker (@michellebarker) on CodePen.dark

Masking

Unlike clip-path the mask-image property is not limited to shapes with clean lines. We can use a PNGs, SVGs or even GIFs to create a mask. We can even use gradients: the blacker parts of the image (or gradient) act as the mask whereas the element will be hidden by the transparent parts.

We can use a radial gradient to create a mask very similar to the clip-path circle:

.hero–secondary {
–mask: radial-gradient(circle at 70%, black 25%, transparent 0);
-webkit-clip-path: var(–mask);
clip-path: var(–mask);
}

Another advantage is that there are additional mask properties than correspond to CSS background properties — so we can control the size and position of the mask, and whether or not it repeats in much the same way, with mask-size, mask-position and mask-repeat respectively.

See the Pen Hero with mask by Michelle Barker (@michellebarker) on CodePen.dark

There’s much more we could delve into with clipping and masking, but let’s leave that for another day! I chose to use a mask instead of a clip-path for this project — hopefully the reason will become clear a little later on.

Tracking the cursor

Now we have our mask, it’s a matter of tracking the position of the user’s cursor, for which we’ll need some Javascript. First we can set custom properties for the center co-ordinates of our gradient mask. We can use default values, to give the mask an initial position before the JS is executed. This will also ensure that non-mouse users see a static mask, rather than none at all.

.hero–secondary {
–mask: radial-gradient(circle at var(–x, 70%) var(–y, 50%), black 25%, transparent 0);
}

In our JS, we can listen for the mousemove event, then update the custom properties for the x and y percentage position of the circle in accordance with the cursor position:

const hero = document.querySelector(‘[data-hero]’)

window.addEventListener(‘mousemove’, (e) = > {
const { clientX, clientY } = e
const x = Math.round((clientX / window.innerWidth) * 100)
const y = Math.round((clientY / window.innerHeight) * 100)

hero.style.setProperty(‘–x’, `${x}%`)
hero.style.setProperty(‘–y’, `${y}%`)
})

See the Pen Hero with cursor tracking by Michelle Barker (@michellebarker) on CodePen.dark

(For better performance, we might want to throttle or debounce that function, or use requestAnimationFrame, to prevent it repeating too frequently. If you’re not sure which to use, this article has you covered.)

Adding animation

At the moment there is no easing on the movement of the spotlight — it immediately updates its position when the mouse it moved, so feels a bit rigid. We could remedy that with a bit of animation.

If we were using clip-path we could animate the path position with a transition:

.hero–secondary {
–clip: circle(25% at 70%);
-webkit-clip-path: var(–clip);
clip-path: var(–clip);
transition: clip-path 300ms 20ms;
}

Animating a mask requires a different route.

Animating with CSS Houdini

In CSS we can transition or animate custom property values using Houdini – a set of low-level APIs that give developers access to the browser’s rendering engine. The upshot is we can animate properties (or, more accurately, values within properties, in this case) that aren’t traditionally animatable.

We first need to register the property, specifying the syntax, whether or not it inherits, and an initial value. The initial-value property is crucial, otherwise it will have no effect.

@property –x {
syntax: ”;
inherits: true;
initial-value: 70%;
}

Then we can transition or animate the custom property just like any regular animatable CSS property. For our spotlight, we can transition the –x and –y values, with a slight delay, to make them feel more natural:

.hero–secondary {
transition: –x 300ms 20ms ease-out, –y 300ms 20ms ease-out;
}

See the Pen Hero with cursor tracking (with Houdini animation) by Michelle Barker (@michellebarker) on CodePen.dark

Unfortunately, @property is only supported in Chromium browsers at the time of writing. If we want an improved animation in all browsers, we could instead reach for a JS library.

Animating with GSAP

In CSS we can transition or animate custom property values using Houdini –I love using the Greensock(GSAP) JS animation library. It has an intuitive API, and contains plenty of easing options, all of which makes animating UI elements easy and fun! As I was already using it for other parts of the project, it was a simple decision to use it here to bring some life to the spotlight. Instead of using setProperty we can let GSAP take care of setting our custom properties, and configure the easing using the built in options:

import gsap from ‘gsap’

const hero = document.querySelector(‘[data-hero]’)

window.addEventListener(‘mousemove’, (e) = > {
const { clientX, clientY } = e
const x = Math.round((clientX / window.innerWidth) * 100)
const y = Math.round((clientY / window.innerHeight) * 100)

gsap.to(hero, {
‘–x’: `${x}%`,
‘–y’: `${y}%`,
duration: 0.3,
ease: ‘sine.out’
})
})

See the Pen Hero with cursor tracking (GSAP) by Michelle Barker (@michellebarker) on CodePen.dark

Animating the mask with a timeline

The mask on my website’s hero section is slightly more elaborate than a simple spotlight. We start with a single circle, then suddenly another circle “pops” out of the first, surrounding it. To get an effect like this, we can once again turn to custom properties, and animate them on a GSAP timeline.

Our radial gradient mask becomes a little more complex: We’re creating a gradient of two concentric circles, but setting the initial values of the gradient stops to 0% (via the default values in our custom properties), so that their size can be animated with JS:

.hero {
–mask: radial-gradient(
circle at var(–x, 50%) var(–y, 50%),
black var(–maskSize1, 0%),
transparent 0,
transparent var(–maskSize2, 0%),
black var(–maskSize2, 0%),
black var(–maskSize3, 0%),
transparent 0);
}

Our mask will be invisible at this point, as the circle created with the gradient has a size of 0%. Now we can create a timeline with GSAP, so the central spot will spring to life, followed by the second circle. We’re also adding a delay of one second before the timeline starts to play.

const tl = gsap.timeline({ delay: 1 })

tl
.to(hero, {
‘–maskSize1’: ‘20%’,
duration: 0.5,
ease: ‘back.out(2)’
})
.to(hero, {
‘–maskSize2’: ‘28%’,
‘–maskSize3’: ‘calc(28% + 0.1rem)’,
duration: 0.5,
delay: 0.5,
ease: ‘back.out(2)’
})

See the Pen Hero with cursor tracking (GSAP) by Michelle Barker (@michellebarker) on CodePen.dark

Using a timeline, our animations will execute one after the other. GSAP offers plenty of options for orchestrating the timing of animations with timelines, and I urge you to explore the documentation to get a taste of the possibilities. You won’t be disappointed!

Smoothing the gradient

For some screen resolutions, a gradient with hard color stops can result in jagged edges. To avoid this we can add some additional color stops with fractional percentage values:

.hero {
–mask: radial-gradient(
circle at var(–x, 50%) var(–y, 50%),
black var(–maskSize1, 0%) 0,
rgba(0, 0, 0, 0.1) calc(var(–maskSize1, 0%) + 0.1%),
transparent 0,
transparent var(–maskSize2, 0%),
rgba(0, 0, 0, 0.1) calc(var(–maskSize2, 0%) + 0.1%),
black var(–maskSize2, 0%),
rgba(0, 0, 0, 0.1) calc(var(–maskSize3, 0%) – 0.1%),
black var(–maskSize3, 0%),
rgba(0, 0, 0, 0.1) calc(var(–maskSize3, 0%) + 0.1%),
transparent 0
);
}

This optional step results in a smoother-edged gradient. You can read more about this approach in this article by Mandy Michael.

A note on default values

While testing this approach, I initially used a default value of 0 for the custom properties. When creating the smoother gradient, it turned out that the browser didn’t compute those zero values with calc, so the mask wouldn’t be applied at all until the values were updated with JS. For this reason, I’m setting the defaults as 0% instead, which works just fine.

Creating the menu animation

There’s one more finishing touch to the hero section, which is a bit of visual trickery: When the user clicks on the menu button, the spotlight expands to reveal the full-screen menu, seemingly underneath it. To create this effect, we need to give the menu an identical background to the one on our masked element.

:root {
–gradientBg: linear-gradient(45deg, turquoise, darkorchid, deeppink, orange);
}

.hero–secondary {
background: var(–gradientBg);
}

.menu {
background: var(–gradientBg);
}

The menu is absolute-positioned, the same as the masked hero element, so that it completely overlays the hero section.

Then we can use clip-path to clip the element to a circle 0% wide. The clip path is positioned to align with the menu button, at the top right of the viewport. We also need to add a transition, for when the menu is opened.

.menu {
background: var(–gradientBg);
clip-path: circle(0% at calc(100% – 2rem) 2rem);
transition: clip-path 500ms;
}

When a user clicks the menu button, we’ll use JS to apply a class of .is-open to the menu.

const menuButton = document.querySelector(‘[data-btn=”menu”]’)
const menu = document.querySelector(‘[data-menu]’)

menuButton.addEventListener(‘click’, () = > {
menu.classList.toggle(‘is-open’)
})

(In a real project there’s much more we would need to do to make our menu fully accessible, but that’s beyond the scope of this article.)

Then we need to add a little more CSS to expand our clip-path so that it reveals the menu in its entirety:

.menu.is-open {
clip-path: circle(200% at calc(100% – 2rem) 2rem);
}

See the Pen Hero with cursor tracking and menu by Michelle Barker (@michellebarker) on CodePen.dark

Text animation

In the final demo, we’re also implementing a staggered animation on the heading, before animating the spotlight into view. This uses Splitting.js to split the text into elements. As it assigns each character a custom property, it’s great for CSS animations. The GSAP timeline however, is a more convenient way to implement the staggered effect in this case, as it means we can let the timeline handle when to start the next animation after the text finishes animating. We’ll add that to the beginning of our timeline:

// Set initial text styles (before animation)
gsap.set(“.hero–primary .char”, {
opacity: 0,
y: 25,
});

/* Timeline */
const tl = gsap.timeline({ delay: 1 });

tl
.to(“.hero–primary .char”, {
opacity: 1,
y: 0,
duration: 0.75,
stagger: 0.1,
})
.to(hero, {
“–maskSize1”: “20%”,
duration: 0.5,
ease: “back.out(2)”,
})
.to(hero, {
“–maskSize2”: “28%”,
“–maskSize3”: “calc(28% + 0.1rem)”,
duration: 0.5,
delay: 0.3,
ease: “back.out(2)”,
});

I hope this inspires you to play around with CSS masks and the fun effects that can be created!

The full demo
The post Dynamic CSS Masks with Custom Properties and GSAP appeared first on Codrops.

When is a web font not a web font? When it’s an email font! In this tutorial I’ll walk you through implementing web fonts into your email campaigns. Web Fonts and Web Safe Fonts Web-safe fonts, like Arial and

When Apple introduced an update to widgets with iOS 14, the Wikipedia iOS team was excited to take the opportunity to rethink our own.

Learn how to ship UIs without worrying about stowaway bugs

In this video, Casey from the WebFX Internet marketing team will go over how to design a product page. Transcript:  Nothing beats the excitement of seeing a package at your door. But let’s rewind.  A lot of factors came

This pandemic has encouraged me to take the plunge into Headspace.

Sketch shared updates to the platform including collaboration, web-integrated workspaces and subscription models.