how-to-animate: A JavaScript repository from kovalenkoiryna15

How to animate

SVG

🦊 Here you can create SVGs - SVGator

Basic JavaScript Animations

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.

kovalenkoiryna15/how-to-animate

How to animate

SVG

Basic JavaScript Animations

Step 1:

Step 2:

Step 3:

CSS Animations

GSAP 3