GSAP 간단한 실습 02

코드 드래그해서 실습해보기

코드를 드래그해서 어떤 효과가 있는지 확인합니다.

  gsap.fromTo('.box-1', {x: 300}, {
    y: 500, 
    duration: 0.5, 
  });

fromTo {x: 300} {y: 500} 2개 사용할 수 있습니다. 300px에서 500px으로 이동합니다.
!fromTo 속성 duration 기본 속성값은 0.5 입니다.

var tl1 = gsap.timeline();
tl1.fromTo('.box-1', {x:0}, {
  duration: 10,
  x: 500,
});
tl1.fromTo('.box-1', {x:250}, {
  duration: 20,
  x: 0,
});

x값 0에서 10초동안 x값 500으로 이동하고
x값 250에서 20초동안 x값 0으로 이동합니다.

var tl1 = gsap.timeline();
tl1.fromTo('.box-1', {x:0}, {
  duration: 10,
  x: 500,
});
tl1.to('.box-1', {
  duration: 2,
  x: 100,
});

!fromTo .to .from 등 timeline(); 에서 가능합니다.