Scroll Animations

A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view.

Check out this Pen!

Note that the event handler is not debounced as we need to actually trigger the animations on actual scroll. Is partially optimised by removing the event handler once all elements are visible. Could be further optimised by throttling the event handler.

CSS animations are borrowed from http://glifo.uiparade.com/. Integration with animate.css of course also possible.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

UPDATE June 2016: For a project I’m building I need the animations to reverse when scrolling up. And so I build’eth.

Check out this Pen!

CSS Mac Plus

Check out this Pen!

In this project I will build a 3D model of the Macintosh Plus and display it in a three dimensional setting. Using CSS Keyframe animation we’ll make it move on screen to show off the 3D effect better.

Great explanatory post on how to actually make this kind of stuff. Touches CSS perspective, perspective-origin, transforms, gradients, some CSS border tricks, keyframes, and animation.

CSS Mac Plus (Explanatory Blogpost) →
CSS Mac Plus (CodePen) →

High Performance Animations

xcheap-operations.jpg.pagespeed.ic.OqFHH0GPnE

Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.

True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop and the like. As you might have guessed: performance was not that great. Then I rewrote it all by using translateX/translateY, and performance was back.

High Performance Animations →

Cargo Cult CSS

Case against the modularization of CSS: Cargo Cult CSS:

Selectors should communicate useful information to developers. The purpose is the same but a contextual selector is far more informative to the developer than a class selector, as it communicates context. It’s a lot easier to understand the purpose behind a rule if the selector tells you that it only applies to elements within a certain scope.

Must admit that I still have to contain myself selector-wise — I used to write heavy selectors back in the day — when applying concepts like SMACCS (which in fact has changed how I write CSS nowadays), as some of the stuff such as <article class="news news-breaking"> can be achieved by using a preprocessor (here @extend).

I guess the solution can be found somewhere in between, although my solution might not even be your solution. As Jeremy Keith once put it: it depends.

In favor of the modularization of CSS, be sure to read CSS Architecture.

The bottom line is that whatever you do to organize your code, make sure you judge your methods by whether or not they actually help make your development easier and more maintainable in the long term.

Cargo Cult CSS →
CSS Architecture →

CSS Animations: Using animation-fill-mode

Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. It’s not pretty. You can use animation-fill-mode to smooth these out without having to write extra CSS to match your first or last keyframe styles.

Tutorial: Using animation-fill-mode In Your CSS Animations →

Fixed-sticky: a CSS position:sticky; polyfill

CSS position: sticky; is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6. In Chrome it is locked behind a chrome://flags setting. Fixed-sticky is a polyfill to enabling this in browsers that don’t support it yet.

position: sticky; is one very handy addition to CSS, paving the cowpaths.

Fixed-Sticky (Github) →
Fixed-Sticky Demo →

Related: the aforementioned jQuery Sticky Objects and jQuery Stick’em. Whilst they look similar in result, position: sticky; is the way to go.

Live filter using CSS selectors

css-filter

Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript.

Clever use of data-* attributes. A shame though the title of the original post, namely Client-side full-text search in CSS, is poorly chosen though, as it’s not full-text search, nor search, nor only CSS.

Client-side full-text search in CSS →