혹시 부드럽게 진입 이후 루프가 가능할까요?
안녕하세요!
초기 애니메이션을 진입할때 css나 gsap으로 keyfream 주고
빠르게 들어온 이후 감속하듯이 부드럽게 흐르도록 구현 할 수 있을까요..?
css에 같은 클래스에 키프레임을 줬더니 css때문에 gsap이 충돌나는지 안되더라구요.ㅠ.
답변 1
1
안녕하세요 squirrel PARK 님 😀
Q. 최초 렌더링시 애니메이션이 빠르게 들어온 이후 감속하는 모션은 어떻게 구현할 수 있을까요 ?
A. GSAP의 가속도를 조절해 해당 애니메이션을 구현할 수 있습니다. 제가 주로 사용하는 가속도는 Power3.inOut 효과를 많이 사용합니다.
원하는 가속도의 모습을 해당 사이트 에서 직접 확인해보고 적용해보세요
GSAP 사용시 주의사항
- 동일한 엘리먼트에게 css 애니메이션(keyframes, transition)과 gsap 애니메이션을 동시에 주지마세요!
gsap은 자바스크립트로 속성 하나씩을 애니메이션 처리 하기 때문에 css의 애니메이션이 걸려 있을 경우 버벅 거리는 문제가 생길 수 있습니다. 꼭 이렇게 줘야 하는 상황이 생긴다면, html 설계를 고려해보시고, 상위 부모에게 css를 하위 자식에게 gsap 애니메이션을 넣어 처리하는 방식을 고려해보세요
감사합니다 :)
1
아.. 같은 div에 css랑 gsap하면 충돌나는군여!
차선책으로 부모 div에 css로 Keyfream 주고 자식에 gsap 효과주는 방법도있겠네요! 감사합니다
챌린지 시작일 문의
0
7
0
17강 강의에 목데이터 첨부파일이 없습니다.
0
7
0
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
10
1
11차시 Antigravity IDE 설치 후
0
14
1
처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법
0
10
1
5,6,7,8 내용이 없어요
0
13
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
10
1
mission 09-01 을 수행할 수 없어요
0
16
1
hover pulse animation 관련해서 질문있습니다!
0
101
2
어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!
1
109
2
autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요
1
263
2
gsap으로 흐르는 배너도 제작이 가능할까요?
1
507
2
다중요소 제어시 질문드립니다.
1
285
2
timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?
1
494
1
gsap 상업적 사용여부
1
1063
1
fork 주소가 어떻게 되나요?
1
484
1
강사님 다중요소제어 stagger 질문있습니다
2
476
1
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
1
739
1
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
1
574
1
기초 트위닝 질문
1
396
1
선생님 Advanced 강의가 절실합니다.
1
500
1
어몽이가 안나와요!! 저만 그럴까요?
1
541
2
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
1
768
1
❗️긴급❗️ 선생님 실습파일이 잘못된것 같습니다.
1
585
1