Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
flip

5 Articles
{
,

}
Direct link to the article Responsive Animations for Every Screen Size and Device
animation canvas flip GSAP SVG animation

Responsive Animations for Every Screen Size and Device

Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the web pretty baffling.

Video graphics are designed within a specific ratio and …

Avatar of Cassie Evans
Cassie Evans on Oct 20, 2022
GSAP Flip plugin logo.
Direct link to the article GSAP Flip Plugin for Animation
animation flip GreenSock

GSAP Flip Plugin for Animation

Greensock made the GSAP Flip plugin free in the 3.9 release. FLIP is an animation concept that helps make super performance state-change animations. Ryan Mulligan has a good blog post:

FLIP, coined by Paul Lewis, is an

…
Avatar of Chris Coyier
Chris Coyier on Feb 15, 2022
Direct link to the article Everything You Need to Know About FLIP Animations in React
flip react web animation api

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 …

Avatar of Kirill Vasiltsov
Kirill Vasiltsov on Jun 16, 2020
Direct link to the article Animating Layouts with the FLIP Technique
animation flip JavaScript waapi

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 …

Avatar of David Khourshid
David Khourshid on Nov 27, 2017 (Updated on Mar 30, 2020)
Direct link to the article Flip an Image
flip transform

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:…

Avatar of Chris Coyier
Chris Coyier on May 18, 2010 (Updated on Feb 6, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top