40 / 56

Format Converter

Convert animations between GSAP, Framer Motion, and CSS formats.

Animation Properties

x: 100

y: 50

scale: 1.2

rotation: 45

opacity: 1

Duration: 0.5s

Easing

GSAP

gsap.to(element, {
  x: 100,
  y: 50,
  scale: 1.2,
  rotation: 45,
  duration: 0.5,
  ease: "power2.out"
});

Framer Motion

<motion.div
  animate={{
  x: 100,
  y: 50,
  scale: 1.2,
  rotation: 45
  }}
  transition={{
    duration: 0.5,
    ease: [0.22, 1, 0.36, 1]
  }}
/>

CSS

.element {
  transform: translateX(100px) translateY(50px) scale(1.2) rotate(45deg);
  opacity: 1;
  transition: all 0.5s ease-out;
}

←→NavigateEscBack to LabFFullscreen