Skip to content

Adding new animations

Juan David Nicholls Cardona edited this page Nov 26, 2019 · 3 revisions

We only need to indicate the Keyframes of each new animation

const WOBBLE: Keyframe[] = [
  { offset: 0, transform: 'translate(0) rotate(0deg)' },
  { offset: 0.15, transform: 'translateX(-25%) rotate(-5deg)' },
  { offset: 0.3, transform: 'translateX(20%) rotate(3deg)' },
  { offset: 0.45, transform: 'translateX(-15%) rotate(-3deg)' },
  { offset: 0.6, transform: 'translateX(10%) rotate(2deg)' },
  { offset: 0.75, transform: 'translateX(-5%) rotate(-1deg)' },
  { offset: 1, transform: 'translate(0) rotate(0deg)' }
];

See the current animations in the project with TypeScript here.

Let us know new cool animations to add in the project, let's make more animations! 💯

Clone this wiki locally