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

Question

어제 이어 질문드리네요..ㅎㅎ 찾아봤더니 잘 안나오기도 하고 머리썻는데 안되서 다시질문드려요 ㅠ 인터넷보면 물 흐르듯 무한으로 보여지는 배너들효과를 구현하려고하는데 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" } );

kindtiger · Answer

안녕하세요 squirrel PARK 님 😀   제가 한달동안 답변을 안한 질문이 있따구요!!!!!!??????? 이건 못본게 분명해요..... 죄송해요 ㅠㅠ,, 원래는 못해도 일주일 안으로 답변을 드리는데...   해당 ui는 GSAP의 코드도 중요하지만 사실 저런 애니메이션은 HTML과 CSS가 8할 입니다.   다 설명드리기 어려워 코드를 작성하여 링크로 드릴테니 확인해보세용~~ (너무 답변이 늦어서.. 죄송한 마음에) https://stackblitz.com/edit/vitejs-vite-c2vptu?file=main.js 핵심은 오른쪽 상자 안의 자식들의 박스 시작 위치 입니다.   *반응형은 적용이 되지 않은 상태 입니다. 해당 코드를 참고하여 반응형으로 제작해보세요 ^.^    감사합니다 :)

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. squirrel PARK님의 질문과 가장 밀접하게 연관되어 있는 내용은 &ldquo;ScrollTrigger의 animation에 함수호출&rdquo; 질문에서 찾을 수 있습니다. 여기서는 GSAP를 사용하여 애니메이션 타임라인을 함수로 등록하고, 특정 스크롤 위치나 이벤트에 따라 그 타임라인을 제어하는 방법에 대해 설명하고 있습니다. 이는 squirrel PARK님의 질문에 직접적인 답변은 아니지만, GSAP와 ScrollTrigger를 활용하여 복잡한 애니메이션 로직을 구현하는 방법을 이해하는 데 도움이 될 수 있습니다. 특히, 무한 반복되는 애니메이션을 구현하려는 경우, .repeat(-1) 설정을 통해 애니메이션이 무한히 반복되도록 설정할 수 있습니다. 동시에, delay 속성을 활용하여 두 애니메이션 사이에 시간차를 두어 연속적으로 실행되도록 할 수 있으며, 이는 물 흐르듯 이어지는 배너 효과를 구현할 때 유용하게 사용될 수 있습니다. 또한, 설정하신 코드 예시에서는 두 개의 박스( .boxes 와 .boxes-clone )가 서로를 이어 반복되면서 무한 스크롤 애니메이션 효과를 만드는 방식으로 코드를 작성하신 것으로 보입니다. duration , ease , repeat , 그리고 delay 속성을 조합하여 두 개의 애니메이션을 연달아 실행시키되, 하나가 종료되는 시점에 다른 하나가 시작되도록 하여 끊김 없는 연속적인 애니메이션 효과를 만들고자 하셨던 것 같습니다. 이러한 접근 방식은 고급 GSAP 사용법에 해당하며, 이와 유사한 효과를 구현하기 위해선 GSAP의 다양한 기능과 속성을 조합하는 방법을 이해할 필요가 있습니다. 질문하신 배너처럼 물 흐르듯 이어지는 무한 반복 애니메이션을 구현하는 것은 repeat , repeatDelay , 그리고 다른 애니메이션 속성들을 적절히 활용함으로써 충분히 가능합니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.