In Support of Functional CSS Animations

It’s not just for making things pretty

Something that I’ve noticed in a lot of the developer spaces I’ve found myself in the past few months is a pervasive side-eyeing of CSS. Many developers scoff at the notion that CSS is, in fact, a programming language, and that developers who specialize in working with the language as mere “web designers” as opposed to bona fide developers.

Most people know that CSS is the thing you use to style your website — change the font of a header, apply a color to a background, or position elements on the DOM. However, CSS isn’t just useful for making your website look pretty, it can be really useful for adding functionality to your web app, particularly in moving DOM elements based on user behavior. Think: menus sliding into place on a button click, or prompts appearing to warn users of irreversible behavior.

One thing I’ve noticed a lot in a bunch of the digital media that I consume is that many news websites will have a video at the top of the article, but when you scroll down past it, it repositions itself in a sidebar to keep the video on the page for the user.

I spent an afternoon to code a version of this functionality using some simple vanilla javascript and CSS animations:

Video Test

The Javascript portion is super simple. I set a flag variable shouldResize as false and set an event listener on the document for a scroll event. When the user scrolls the getScroll function gets the location of the top of the viewport on the page and sees if it is more than 1, meaning that the user has begun to scroll down the page. If that is true, then it sets the flag variable to true, which then triggers the next ternary expression which adds a class of resized to the video tag.

let shouldResize = false;
let video = document.querySelector('.video-player')
function getScroll() {
  let scroll = document.documentElement.scrollTop
  scroll > 1 ? (shouldResize = true) : (shouldResize = false)
  console.log(shouldResize)
  shouldResize ? video.classList.add('resized') : video.classList.remove('resized');
}
document.addEventListener('scroll', getScroll)

The CSS that enables this behavior is fairly simple. The .video-player styling is the default style, and centers the video at the top of the screen with a fixed position. The key attribute to look at here is the transition attribute, which I’ve set to transition: all .3s; . This means that any attribute on the .video-player class that gets changed will transition over .3 seconds to its new state. The .resized class changes the position and the width of the video player so that it fits in the sidebar. Something that I did notice was that I originally styled the .video-player with a display: block; margin: auto to center it. However, when I tried to transition between the two styling, the video would jump around as it transition from a position: static which is default to a position: fixed . Once I positioned both styling states with the fixed starting point, the animation smoothed out since they both had the same origin point.

video.video-player {
  position: fixed;
  width: 50vw;
  left: 25vw;
  transition: all .3s;
  margin: auto;
}
video.resized {
  position: fixed;
  width: 25vw;
  left: 75vw;
}