혹시 부드럽게 진입 이후 루프가 가능할까요?
안녕하세요!
초기 애니메이션을 진입할때 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 효과주는 방법도있겠네요! 감사합니다
Json 플러그인 사용시 variable collection 없음
0
12
1
배리어블 목록 없음
0
21
3
Token 등록 방법 문의
0
18
1
3강 질문
0
15
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
26
1
2강 nodejs 3단계 설명 질문
0
33
1
6-6 실습 문의
0
23
2
imagesLoaded에 관한 질문
0
19
2
hover pulse animation 관련해서 질문있습니다!
0
66
2
어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!
1
80
2
autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요
1
228
2
gsap으로 흐르는 배너도 제작이 가능할까요?
1
473
2
다중요소 제어시 질문드립니다.
1
252
2
timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?
1
475
1
gsap 상업적 사용여부
1
1027
1
fork 주소가 어떻게 되나요?
1
462
1
강사님 다중요소제어 stagger 질문있습니다
2
453
1
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
1
712
1
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
1
550
1
기초 트위닝 질문
1
379
1
선생님 Advanced 강의가 절실합니다.
1
465
1
어몽이가 안나와요!! 저만 그럴까요?
1
512
2
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
1
741
1
❗️긴급❗️ 선생님 실습파일이 잘못된것 같습니다.
1
554
1