Skip to main content
CSS is fun and cool and I like it.
Article

Everything You Need to Know About FLIP Animations in React

With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE).  Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because it’s native — meaning it requires no additional libraries to work. If you’re completely new to WAAPI, here’s a very good introduction by Dan Wilson.

One of … Read article “Everything You Need to Know About FLIP Animations in React”

Article

Animating Layouts with the FLIP Technique

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this – as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions is often an afterthought, or something that is “nice to have” if time permits. All too often, we experience web apps that simply “jump” from view to view without giving the user time to process what just happened in the … Read article “Animating Layouts with the FLIP Technique”

Snippet

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.

.flip-horizontally {
  transform: scaleX(-1);
}

See how one arrow is used to point both directions here:

See the Pen
Flip an Image
by CSS-Tricks (@css-tricks)
on CodePen.

Rotation is another possibility, meaning our one arrow could go lots of directions:

See the Pen
Flip an Image
by CSS-Tricks (@css-tricks)
on CodePenRead article “Flip an Image”