💡 Proposal - Add Animation Package

[burakukula]

Discussed in https://github.com/contentful/forma-36/discussions/1542

^{Originally posted by mshaaban0 November 19, 2021} Hello Friends,

Looking at the state of animation with react available packages like framer-motion or react-spring it gives users the ability to create powerful animation with javascript however, the downside is bundle size, I was trying to create a fadein animation in a Contentful app using react-spring it added 24kb to my bundle size.

Since every app has it's own bundle, and we don't dedupe apps js bundles this can result to pages with many unnecessary megabytes.

Proposed Solution

To unify our animation patterns and make it easy for devs to use, we can benefit from emotion-css keyframes method, We can create a packages f36-animation that contains predefined animation patterns (timing, easing, effects) to be used with css

import {css} from '@emotion/css';
import { fadeIn } from '@contentful/f36-animation';

const elementStyles = css({
  ...fadeIn,
 backgroundColor: '#fff',
})
// Or
const elementStyles = css({
  animation: `${fadeIn} ${tokens.transitionDuration} ${tokens.easingDefault}`
})

I personally prefer the first option where we spread ...fadeIn as it allows us to control animation timing and easing to provide a consistent animation experience.

Initial animations

Some initial animations I think we can benefit from

fadeIn
fadeOut
slideIn(direction)
slideOut(direction)
rotate(10deg)
bounce
scale
scaleX
scaleY

There are many other examples here https://animate.style

Thoughts?

[github-actions[bot]]

Marking issue as stale since there was no acitivty for 30 days

[mshaaban0]

Closing for inactivity and moving it forward with internal tickets.