Simple carousel, animated using Web Animation API and the FLIP technique.
FLIP stands for:
- First - save state (position, size, etc.) of object before manipulating it
- Last - manipulate the object instantaneously and save state again
- Invert - calculate differences (delta) between states, to make it appear as if object is (still) in its first state
- Play - transition from first to last state (transform from delta to none)
Example will only work on browsers that support Web Animation API (see caniuse.com). There is a great polyfill that you can use.