gsap으로 흐르는 배너도 제작이 가능할까요?

웹 애니메이션을 위한 GSAP 가이드 Part.01

기초 애니메이션

해결된 질문

작성

193

수정됨

어제 이어 질문드리네요..ㅎㅎ

찾아봤더니 잘 안나오기도 하고 머리썻는데 안되서 다시질문드려요 ㅠ

인터넷보면 물 흐르듯 무한으로 보여지는 배너들효과를 구현하려고하는데

A div실행 이후 B가 실행하고 이걸 무한으로 돌려야겠다! 싶었습니다. 제가 계산을 잘못한것인지 계속 상이하게 됩니다. ㅠ

목표 예시) framer 로 구현

위와 같은 효과를 GSAP로도 주고 싶었는데

가능할까요?

트라이 계쏙해보는데 안되네용 ㅠ

제 생각은 무한루프 돌리는 상태의 div를 감싼 부모를

css 키프레임줘서 빠르게 들어온 이후 무한으로 루프돌릴계획입니다!

  useGSAP(
    () => {
      const Perents = ref.current?.offsetHeight;

      if (Perents) {
        gsap.set(".boxes-clone", { y: `-=${Perents}` });

        gsap.fromTo(
          ".boxes",
          { y: `-${Perents}` },
          {
            duration: 3,
            ease: "none",
            y: `+=${Perents}`,
            repeat: -1,
          }
        );

        gsap.fromTo(
          ".boxes-clone",
          { y: `-${Perents}` },
          {
            duration: 3,
            ease: "none",
            y: `+=${Perents}`,
            repeat: -1,
            delay: 3,
          }
        );
      }
    },
    { scope: ".wrapper" }
  );

HTML/CSS javascript 인터랙티브-웹 gsap

답변 2

범쌤

지식공유자

안녕하세요 squirrel PARK 님 😀

제가 한달동안 답변을 안한 질문이 있따구요!!!!!!???????
이건 못본게 분명해요.....

죄송해요 ㅠㅠ,, 원래는 못해도 일주일 안으로 답변을 드리는데...

해당 ui는 GSAP의 코드도 중요하지만 사실 저런 애니메이션은 HTML과 CSS가 8할 입니다.

다 설명드리기 어려워 코드를 작성하여 링크로 드릴테니 확인해보세용~~ (너무 답변이 늦어서.. 죄송한 마음에)

https://stackblitz.com/edit/vitejs-vite-c2vptu?file=main.js

핵심은 오른쪽 상자 안의 자식들의 박스 시작 위치 입니다.

*반응형은 적용이 되지 않은 상태 입니다. 해당 코드를 참고하여 반응형으로 제작해보세요 ^.^

감사합니다 :)

squirrel PARK

질문자

우와......... 이렇게까지 감사합니다... 머리 엄청쓰던건데 분석해보겠습니다 감삼다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

squirrel PARK님의 질문과 가장 밀접하게 연관되어 있는 내용은 “ScrollTrigger의 animation에 함수호출” 질문에서 찾을 수 있습니다. 여기서는 GSAP를 사용하여 애니메이션 타임라인을 함수로 등록하고, 특정 스크롤 위치나 이벤트에 따라 그 타임라인을 제어하는 방법에 대해 설명하고 있습니다.

이는 squirrel PARK님의 질문에 직접적인 답변은 아니지만, GSAP와 ScrollTrigger를 활용하여 복잡한 애니메이션 로직을 구현하는 방법을 이해하는 데 도움이 될 수 있습니다. 특히, 무한 반복되는 애니메이션을 구현하려는 경우, .repeat(-1) 설정을 통해 애니메이션이 무한히 반복되도록 설정할 수 있습니다. 동시에, delay 속성을 활용하여 두 애니메이션 사이에 시간차를 두어 연속적으로 실행되도록 할 수 있으며, 이는 물 흐르듯 이어지는 배너 효과를 구현할 때 유용하게 사용될 수 있습니다.

또한, 설정하신 코드 예시에서는 두 개의 박스(.boxes와 .boxes-clone)가 서로를 이어 반복되면서 무한 스크롤 애니메이션 효과를 만드는 방식으로 코드를 작성하신 것으로 보입니다. duration, ease, repeat, 그리고 delay 속성을 조합하여 두 개의 애니메이션을 연달아 실행시키되, 하나가 종료되는 시점에 다른 하나가 시작되도록 하여 끊김 없는 연속적인 애니메이션 효과를 만들고자 하셨던 것 같습니다.

이러한 접근 방식은 고급 GSAP 사용법에 해당하며, 이와 유사한 효과를 구현하기 위해선 GSAP의 다양한 기능과 속성을 조합하는 방법을 이해할 필요가 있습니다. 질문하신 배너처럼 물 흐르듯 이어지는 무한 반복 애니메이션을 구현하는 것은 repeat, repeatDelay, 그리고 다른 애니메이션 속성들을 적절히 활용함으로써 충분히 가능합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

gsap으로 흐르는 배너도 제작이 가능할까요?