How to animate

SVG

🦊 Here you can create SVGs - SVGator

Basic JavaScript Animations

       Step 1:

      Tutorial - Demo

       Step 2:

       Tutorial - Demo

       Step 3:

       Tutorial - Demo

CSS Animations

       Tutorial made by HTML Academy

property	values
animation	name duration timing-function delay iteration-count direction fill-mode play-state
animation-name	@keyframes name {}
animation-duration	s, ms
animation-iteration-count	infinite or number
animation-direction	alternate
animation-delay	s, ms
animation-fill-mode	forwards, backwards, both
animation-play-state	running, paused
animation-timing-function	linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(), steps(), step-start, step-end

...

GSAP 3

Tween - анимация, которая может изменить единственное несколько свойство одного нескольких объектаов за провежуток времени одновременно для всех объектов или поочередно.

  gsap.to()
  gsap.from()
  gsap.fromTo()

CSS	JavaScript
.star { animation-name: move-star; animation-duration: 3s; } @keyframes move-star { to { transform: translateX(750px); } }	const star = document.querySelector('.star'); star.addEventListener('click', () => moveStar()); function step(time, duration, finalPosition) { const speed = finalPosition / duration; const step = Math.min(speed * time, finalPosition) + 'px'; star.style.transform = `translateX(${step})`; } function moveStar() { let startTime; requestAnimationFrame( function animate(timestamp) { const duration = 3000; const finalPosition = 750; const runTransition = step; if(startTime === undefined) { startTime = timestamp; } const elapsedTime = timestamp - startTime; runTransition(elapsedTime, duration, finalPosition); if (elapsedTime < duration) { window.requestAnimationFrame(animate); } }); }
GSAP gsap.to('.star', { x: 750, duration: 3 });

Timeline - контейнер для нескольких tweens.