DEV Community: Joost Kiens

Creating practical Instagram-like galleries and horizontal lists with CSS scroll snapping

Joost Kiens — Tue, 05 May 2020 07:49:55 +0000

What's the difference between carousels and horizontally scrollable lists? Is it the gestures, snapping, or the number of visible items? They are very similar, especially on touch devices.

I looked at the Instagram iOS app to learn more and noticed 3 different elements you can scroll horizontally.

I set out to build these 3 elements based on the same code, mainly CSS. Here’s what I learned.

Three scrollable elements

Free-scrolling horizontal lists

A horizontal list that overflows its boundaries. You can freely scroll left and right. Netflix and Spotify use it everywhere on mobile, Instagram uses it for its stories.

It uses a bit of old school CSS, like overflow-x, and is improved with more experimental rules.

Snapping horizontal lists

The same as free-scrolling horizontal lists, but the nearest item in the list snaps into place. Like the “Suggested for You” section in the Instagram app.

Here we have to add some newer CSS, like scroll-snapping. On older browsers, it degrades gracefully to the first version 👊. This makes it a very practical solution to use in production.

A gallery

This is similar to snapping horizontal lists, but displaying one item at a time. An example is the Instagram Gallery. There's a row of dots below, one for each image, to indicate there are more images and which image we are currently viewing.

The code is also identical to the second one. However, we don't need the gap and padding plus we add a few lines of JavaScript using the IntersectionObserver to show which dot corresponds to the currently visible image.

Building the 3 different versions

Free-scrolling horizontal lists

We make a horizontal list with the list-items in a horizontal row by using flex-box and we allow the list to scroll horizontally.

The list-items get an explicit size and a gap in between.

We set padding, larger than the gap, so we can see when we've scrolled to the beginning or end of the list.

.list {
  display: flex;
  padding: 20px;
  overflow-x: scroll;
}

.item {
  height: 224px;
  width: 125px;
  flex-shrink: 0;
}

.item:not(:last-child) { margin-right: 10px; }

You can see it here:

It works, but we can improve it:

Contain overscrolling

For some browsers, a swipe left is like using the back button. Try it out by forcefully scrolling to the beginning of the list. We can prevent this by setting the overscroll-behavior to contain.

Hide the scrollbar

We can hide the scrollbar initially by setting overflow-x to auto. However, when you start scrolling it will appear again. We can set the scrollbar-width to none to completely hide it. At the time of writing, this only works in Firefox, so we add the following mess of unstandardized bastard CSS to hide it in other browsers:

.list { -ms-overflow-style: none; }
.list::-webkit-scrollbar { display: none; }

Looks much better, but if you feel this hurts accessibility or your CSS-purist-heart, you can leave it out and use overflow-x: auto instead.

Momentum scrolling

In iOS it lacks the standard momentum scrolling. We can tell the browser to scroll use momentum scrolling by setting the non-standard: -webkit-overflow-scrolling: touch;.

Prevent vertical scrolling

We can scroll the page vertically while interacting with the list. We can disable this for touchscreen users by adding touch-action: pan-x to the list. However, if your list covers the entire viewport, this will prevent the user from scrolling vertically. Best use it with caution!

List padding

There's something weird going on with the padding of the .list. It's on the start, but it has disappeared in the end 😕. To be honest, I have no idea why this occurs. There's a hacky fix though: an absolutely positioned (pseudo) element with a width of the padding peaking out of the scrolling items.

It's ugly and it doesn't make any sense! How does this even work? However, it is important that there is a padding, so it's clear that we've scrolled to the end of the list. With pain in our hearts, we'll add it.

So now the CSS looks like this:

.list {
  display: flex;
  padding: 20px;
  overflow-x: scroll;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.list::-webkit-scrollbar { display: none; }

.item {
  height: 224px;
  width: 125px;
  flex-shrink: 0;
}

.item:not(:last-child) { margin-right: 10px; }

/* hacky fix for padding at the end of the list */
.item:last-child {
  position: relative;
}

.item:last-child::after {
  position: absolute;
  left: 100%;
  height: 1px;
  width: 20px;
  display: block;
  content: "";
}

And it looks like this:

Snapping Horizontal lists

Next we add scroll snapping. First, we tell the list to always stop scrolling at a horizontal snapping point.

.list {
  scroll-snap-type: x mandatory;
}

And to the list-items we add scroll-snap-align: start;, which means we snap to the start: on the left if you are using English or another left to right language*.

If we look at “Suggested for You” on Instagram, the previous item is always peaking out a little bit. Turns out we can set the scroll padding on: scroll-padding-inline-start: 20px;. (Note: I added scroll-padding-left, since Safari lacks support for inline-start at the moment.)

It is possible to swipe more items with one swipe. This is not possible on Instagram. We can add scroll-snap-stop: always; to the list-items, but browser support is is still spotty for now.

That’s it!

*) On the right for the RTL homies out there 👋

Instagram-like gallery

If we make the list-items as wide as the scrolling area, and remove the padding and gap, it looks and behaves pretty much like the Instagram gallery. Except for the little indicator dots. Without the dots it will look like this:

We want to have these indicator dots, though. They are there for 3 reasons:

Indicate that there is more to see, so it is clear a user can swipe to the next item.
Indicate which image is currently visible.
Indicate we have scrolled to the first or last item.

The easiest way is to let the browser take care of determining which item is visible by using the IntersectionObserver.

We make a list of dots, each dot corresponds to an image. When an item is visible (intersecting) in the list, we get that item’s index and set the indicator dot with the corresponding index to active.

This is what it will look like, see the comments in the code above each section for an explanation of each step.

// references to DOM elements
const list = document.querySelector('.list');
const items = Array.from(document.querySelectorAll('.item'));
const indicators = Array.from(document.querySelectorAll('.indicator'));

// create an observer with the list as intersection root
const observer = new IntersectionObserver(onIntersectionObserved, {
  root: list,
  threshold: 0.6
});

// observe each item
items.forEach(item => {
  observer.observe(item);
});

// when the observer detects an entry changing 
// (item entering or exiting  list)
// and the entry is intersecting
// get the intersecting item’s index
// set the correct indicator to active
function onIntersectionObserved(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const intersectingIndex = items.indexOf(entry.target);
      activateIndicator(intersectingIndex);
    }
  });
}

// toggle an `active` class on the indicators
function activateIndicator(index) {
  indicators.forEach((indicator, i) => {
    indicator.classList.toggle('active', i === index);
  });
}

Here’s how it looks

A note on threshold
We set the threshold to 0.6. This means that if 60% of the item is visible, it counts as intersecting.

If we set it to 1, we only count a completely visible item as intersecting. This would work fine with scroll snapping enabled, but doesn’t work as well with free-scrolling on older browsers without support for scroll snapping (perhaps with an IntersectionObserver polyfill).

When we lower the threshold to somewhere below 1, we count a partly visible item as intersecting. If it’s 0.5 or below, multiple items could be intersecting. So 0.6 seems like a reasonable value.

Conclusion

The bad

Since this uses native scrolling it is not possible to adjust the way the movement feels, we can’t control the ‘stickiness’ of the snapping or the ‘decay’ of the scroll motion. This is decided by the browser. If there’s a need to have control over this, I would choose a more JavaScript-heavy solution. Finally, it's definitely not the most pretty CSS with a hack and a few non-standard properties.

The good

The small amount of code is pretty awesome. And the way it gracefully degrades in older browsers makes this a pretty solid technique in my opinion.

I don't know the constraints which led to the decision to not use native scrolling for the Instagram gallery on their website, but I feel native scroll snapping feels more natural.

What about desktop?

While horizontal scrolling feels very natural on touch devices, it is a little awkward and unintuitive on desktop. Buttons to move to the left and right help, the Instagram website does this as well.

Happy hacking, and let me know if you would use this technique in production. 🤘

Bonus tip: if you want to use the indicators as navigation, scrollIntoView({ behavior: 'smooth', inline: 'start' }) is a good place to start!

TIL a better way to handle in/out transitions

Joost Kiens — Mon, 20 Apr 2020 06:26:34 +0000

Using CSS grid & the hidden attribute to simplify in/out transitions.

If I need to replace an element with another element, it's often a good user experience if there's a transition. A card gets replaced with another card, maybe a carousel, whatever.

In other words, I want to animate something that disappears and, at the same time and place, animate another thing that appears.

I always found coding this to be a bit clunky because there are two annoying problems:

Two elements need to be positioned in the same space.
I will need to keep the disappearing element around during the animation; I can’t remove it at the moment it makes the most sense.

This morning I came across a tweet by David K. Piano that got me all excited. He offers solutions to both these problems, way better solutions than I’ve ever used before!

// Detect dark theme var iframe = document.getElementById('tweet-1207308369687699456-7'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1207308369687699456&theme=dark" }

How to position 2 elements in the same space?

CSS and the DOM aren’t really good at positioning 2 elements in the same place*. There are not many ways to accomplish this.

Previously I’ve used position: absolute on those 2 elements. This works well, but now both elements are taken out of the layout flow, so don’t take any space anymore. To combat this you could read the height and width of these elements and set these on their parent. But what if the dimensions change? Add a ResizeObserver? The code gets quite complex for something so basic.

That’s why I was so excited when I read David’s solution: using CSS Grid to create overlapping elements 😲.

.parent {
    display: grid;
    grid-template: 1/1;
}

.transitioningChildren {
    grid-area: 1/1;
}

So what’s going on here?

We are telling the parent to make a grid with one row and one column. The children are all positioned in the area of the grid, which occupies the 1st row and the 1st column.

This will stack all the .transitioningChildren on top of each other. 💥Boom💥.

And what’s more: the grid will automatically expand to the width of its widest child and to the height of its highest child (weird sentence, but ok…). Freaking genius!!!

I absolutely love how something designed for a completely different reason (grid layouts), fits so well in this use case (positioning elements on top of each other for animation).

*) Except for SVG, elements inside an SVG stack on top of each other by default.

How to animate something that’s disappearing?

It isn’t possible to animate something that’s not there.

In order to work around this, I have seen solutions where both the appearing and disappearing elements are kept around during the animation. The disappearing element is removed after the animation is complete. React-spring’s useTransition and ReactTransitionGroup work this way.

But this technique isn’t without its drawbacks: screen readers see both elements, I could tab to a link or button in an element that’s disappearing, and so on.

I could throw more code at it to solve these issues, but it’s a hassle.

And what if I just want a simple CSS transition and don’t want the added complexity of these tools?

The magic that these tools add is keeping the disappearing element around for long enough to finish the animation. But what if I could just leave the element in the DOM? If only it would not interfere with screen readers, keyboard navigation, layout, blah blah blah. This would make my life a lot easier.

Turns out we can use the hidden attribute for all these requirements. And what’s even more impressive is how we can use the hidden attribute as a selector and transition from and to the hidden state.

The hidden attribute sets display: none in the browser's stylesheet. So we do need to explicitly declare another display property on the element to override it.

.transitioningChild {
    display: block;
    transition: all .3s .3s cubic-bezier(.5, 0, .5, 1);
    transition-property: opacity, transform;
}

.transitioningChild[hidden] {
    transition-delay: 0;
    opacity: 0;
    transform: scale(0.8);
}

Whuuut! Awesome!

I would definitely use this in situations where I don’t mind keeping hidden elements around.

It’s okay to keep elements in the DOM. It’s not like you have to pay DOM rent for them to stay there.

Here’s a demo showing both these principles:

Browser support

This holds up surprisingly well in modern browsers, even in IE11! It uses an older spec for CSS Grid, but with a few tweaks, the result is the same.

.example {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1;
    -ms-grid-columns: 1;
        grid-template: 1/1;
}

.child {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: 1/1;
}

The hidden attribute is supported as well in all modern browsers and IE11.

Conclusion

I’ve used grid-areas, and -templates before, I knew about the hidden attribute, but I never put together how they could work together to help with in/out transitions.

If you find this useful, follow David (or me😅) on Twitter for more tips like these.

How I Transitioned from Ease to Spring Animations

Joost Kiens — Tue, 03 Mar 2020 06:45:59 +0000

Lessons learned while building react-spring visualizer.

At work we have been transitioning towards react-spring and it has quickly become my favorite UI-animation library when working with React; I love its small footprint, modern hook-based API and performant animations without re-renders.

One strong point of react-spring is that it supports physics-based animations, especially those based on springs. These types of animation feel very natural. However, coming from using eases and durations in CSS and libraries such as GSAP, there was a lot that I didn't get at first.

React-spring's configuration accepts properties such as tension, mass, friction and velocity. While I sort of understood the meaning of these words, I had no idea what they meant in the context of a spring animation. Which values would I need to give them to hit that sweet spot, where the animation feels just right?

So I built a tool to help me visualize how these values impact an animation: react-spring visualizer. In the process of building this tool, I tried to understand how spring based animations work. Below are the things I've learned along the way.

By the way, the same things apply to any spring animation, not just react-spring. They are just as relevant if you use React-Motion, Framer motion or Anime.js.

First, a Refresher on Easing

When you think of an object, for example a car, that goes from A to B, it will not immediately reach full speed and it won't stop immediately when it reaches its destination. Instead it will slowly increase speed, reach its top-speed and slow down before eventually coming to a halt. It will ease in and ease out.

The same goes for UI elements, compare the two animations below:
Tap to play again.

The top one, which moves at a constant speed, feels mechanical and a bit awkward. The bottom one eases in when starting, reaches full speed and eases out before arriving at its destination. Since this mimics the movement of the car above, it feels more natural.

CSS, GSAP, anime.js, even jQuery come with some preset eases, so it's safe to say most frontend developers are familiar with them. A good list of commonly used eases can be found in this Easing Functions Cheat Sheet.

So How do Ease-based Animations Work?

An animation with easing always needs at least 2 things: a duration usually expressed in seconds or milliseconds and an easing function representing a curve.

Here's an example of an easing curve named quadIn:

function quadIn(t) {
 return t * t
}

It's a quadratic function, that's why it's called quadIn. If you plot the curve of this function it would look like this:

A graphic representation of a quadIn easing function.

The start of the progress of the animation is 0 and the end is 1. If you would move a variable called x from 0 to 400 pixels in 750 milliseconds, you would calculate the current position for each frame by interpolating between the values like this:

function update(delta) {
  const t = (delta / 750)
  return quadIn(t) * 400
}

Delta is the time since the start of the animation, so after after 200 milliseconds x would be roughly at 28.4 pixels.

const x = (200 / 750) * (200 / 750) * 400 // ≈ 28.4

After 700 milliseconds x is at 348.4 pixels, and so on. Below is an example of a quadIn animation.
Tap to play again.

By the way, above I stated we are interpolating between values. An animator might express the same principle by saying they are inbetweening or tweening between keyframes. It took me an embarrassingly long time to realize where all these terms originated 🤷‍♂️.

Why use Spring Animations?

While eases look a lot nicer than linear animations, there's still something unnatural about them; things in the real world rarely move according to a fixed duration and a mathematical function.

For example, what would the easing function of a falling object be? Easing functions are an approximation of how things move in the real world. But we can do better!

In order to mimic how physical objects move, we have to look at… well, physics. And one aspect of physics is especially useful when working with UI animations: the way springs move.

Spring animations are very useful for UI animations.

Physics-based animations feel more natural than ease-based animations.
Spring animations are more intuitive compared to ease-based animations.
Physics-based animations are interruptible!
Because spring animations take an initial velocity, they are well adapted to go from a swipe or drag to an animation after release.

It's no wonder they are used extensively in native apps on Android and especially iOS, but for some reason the web trails behind. If you are interested in learning why spring animations work so well, I can highly recommend this talk by Apple engineers.

For a comparison, see the two animations below:
Tap to play again.

So How Do Spring Animations Work?

Earlier we saw that for ease-based animations we check every frame: what's my position based on this time and this function?

Spring animations work a bit differently: each frame we check: based on the current position, velocity, mass, tension, and friction what will the position be in the next frame?

In order to do that we need to know a few properties, like mass, tension, friction and velocity. In react-spring these are defined in the config. It looks like this:

const props = useSpring({
   from: { progress: 0 },
   to: { progress: 400 },
   config: { 
    tension: 170,
    mass: 1,
    friction: 26,
    velocity: 0,
    precision: 0.01
  }
})

So what do these terms mean?

Imagine you have a spring hanging from a ceiling with a "bob" on the end. If the spring is at rest, it is at its resting point (or at equilibrium). Pull the bob down.

Mass will be the mass of this bob. While not technically the same, you can think of it as the weight.

The spring itself has a property called tension. This is a constant and in the real world is determined by the spring's material, the thickness of the coils, etcetera. Sometimes this is also called rate, spring constant or stiffness.

Friction is a force acting on the bob reducing the motion of the spring. I prefer to think of it as the density of the surrounding medium, for example air. Air would have lower friction than water or molasses. This is also sometimes referred to as damping.

Then there's the velocity, which is the initial velocity or speed the spring has when it is released. As if you give the bob a push. Or a pull for a negative velocity.

When the spring reaches its resting point it will bounce around for a while. With each iteration the amplitude will be smaller. Precision is the amplitude at which the animation is stopped.

The physics

So if our starting point is 0, how do we get to 400 with these config values?

We first calculate the spring force (Fs), by using Hooke's law.

Where k is the tension of the spring and x is the displacement. The displacement is the distance between the current length of the spring and the spring length at rest (see image above).

const displacement = currentPosition - toPosition
const springForce = -tension * displacement

Next, we determine the friction force:

const frictionForce = -friction * currentVelocity

Where currentVelocity is the velocity in the current frame, not the initial velocity in the configuration.

From here we can calculate the acceleration, the new velocity and finally the new position, using the equations of motion.

const acceleration = (springForce + frictionForce) / mass
const newVelocity = currentVelocity + acceleration
const newPosition = currentPosition + newVelocity

In the next frame the newVelocity and newPosition become the currentVelocity and currentPosition.

All together it looks something like this:

let velocity = config.velocity
let position = from.progress
update()
function update() {
  const tensionForce = -tension * (currentPosition - toPosition)
  const dampingForce = -config.friction * velocity
  const acceleration = (tensionForce + dampingForce) / mass
  velocity = velocity + acceleration
  position = position + velocity
  if (Math.abs(position - to.progress) > precision {    
    window.requestAnimationFrame(update)
  }
}

Note: this is a very simple example. The folks behind react-spring use a few tricks to make the results more accurate and performant. You can see their code here.

Building react-spring visualizer

When I set out to build react-spring visualizer, at first I wanted to use a chart, similar to the excellent ease visualizer from GSAP. But because we are not working with predefined curves and durations, it didn't feel right. So I chose to show the effects of the parameters in a spring.

I have added some visualizers for the most common types of animations: transforms (opacity, translate and rotate) and opacity. Those are the properties I use most of the time when animating DOM elements, since they can be modified by compositing alone and don't trigger expensive repaints.

While building this tool, I had the chance to take deep-dive into spring animations, learning way more than I could ever have from reading the documentation (which is a bit sparse) and examples (which are gorgeous, but a bit complex).

I built the app on top of our own build stack: kaliber/build based on webpack and PostCSS with SSR out of the box. It's highly opinionated, but requires zero configuration and it's open source!

We use it for all our projects with React, but also for our WordPress based projects. One really cool feature is how it allows you to easily have smaller React applications inside a WordPress site with data from the CMS.

I was allowed to spend some time at work writing this article, as long as I plugged our job vacancies 😁. If you have read this far you're obviously the kind of person we are looking for, so why not join us as frontend developer at Kaliber?

By the way, if you want to know more about how position, velocity and acceleration work together, I can highly recommend checking out The Nature of Code by Daniel Shiffman. He also has a great video about springs.

Get the most out of your react-spring configuration

Joost Kiens — Mon, 13 Jan 2020 06:47:09 +0000

React-spring

My favorite solution for UI animations when working with React is react-spring, a spring-physics based animation library.

I love it for its simple, declarative, hook-based API and animation updates without re-renders.

In case you're not familiar, the code might look something like:

import { animated, useSpring } from 'react-spring'

function Component({ visible }) {
  const { opacity } = useSpring({
    from: { opacity: 0 },
    to: { opacity: visible ? 1 : 0 },
    config: { mass: 2, tension: 280, friction: 12, clamp: true }
  })

  return <animated.div style={{ opacity }} />
}

BTW, if you are not familiar, check it out!

However, as a newbie to spring-based animations, I've had a hard time knowing which effect the different config settings would have.

I believe I know what mass is, and I can sort of imagine what tension is in the context of a spring. But how would these values impact my animation? I found myself often changing the parameters and replaying the animation in the hope it would look good.

In order to take the guess-work out and get the most out of react-spring, I built a visualizer to help me find the optimal config for a specific animation.

React-spring visualizer

On the left side you can change the config values for spring animations, on the right side you can see the animation itself.

In the default "spring" view, the impact of mass, tension, friction and clamp on a spring are visualized:

Mass changes the size of the "bob" on the end of the spring.
Tension changes the amount the spring is pulled from its resting point.
Friction changes the scale of the downward arrow in the top left.
Selecting clamp adds a barrier just above the spring's resting point.

There are 4 other displays to see how your config will look:

translate
scale
rotate
opacity

You can access them with the buttons below the visualizer.

If you are happy with your configuration, use the copy-to-clipboard button to copy the settings.

I would really appreciate it if you could have a look & let me know what you think!