혹시 부드럽게 진입 이후 루프가 가능할까요?
안녕하세요!
초기 애니메이션을 진입할때 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 효과주는 방법도있겠네요! 감사합니다
강의제목에 10/15일 삭제라고 나와있는데,
0
34
1
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
53
2
스크립트 영상 미일치
0
66
3
감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
0
51
2
강의 설명 중에 헷갈리는 것이 있네요
0
47
1
수업자료 관련 문의
0
64
3
1강 동영상 재생 오류
1
65
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
35
1
hover pulse animation 관련해서 질문있습니다!
0
116
2
어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!
1
119
2
autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요
1
287
2
gsap으로 흐르는 배너도 제작이 가능할까요?
1
526
2
다중요소 제어시 질문드립니다.
1
303
2
timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?
1
509
1
gsap 상업적 사용여부
1
1076
1
fork 주소가 어떻게 되나요?
1
500
1
강사님 다중요소제어 stagger 질문있습니다
2
491
1
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
1
760
1
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
1
594
1
기초 트위닝 질문
1
409
1
선생님 Advanced 강의가 절실합니다.
1
517
1
어몽이가 안나와요!! 저만 그럴까요?
1
569
2
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
1
784
1
❗️긴급❗️ 선생님 실습파일이 잘못된것 같습니다.
1
596
1