inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

키프레임 사용하기 (2)

어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!

해결된 질문

90

pom0306

작성한 질문수 1

1

 키프레임 wrap around 실습하다가 궁금해서 여쭤봐요!

해설해주신 대로 어몽이를 x를 420으로 하면

부모인 stage 가로사이즈 500px이 바뀌면 어몽이에 적용한 420도 같이 바뀌어야 해서

부모 사이즈를 기준으로 하려면 left나 right 속성을 사용하는 방법 밖에 없을까요?

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

답변 2

1

SuperDuper

const stageEl = document.querySelector('.stage');
const amongEl = document.querySelector('.stage .among');

const moveMaxX = stageEl.clientWidth - amongEl.clientWidth;
이렇게 해서 동적으로 부모의 위치를 계산하고, 현재 어몽이 width값도 빼서 했어요

0

범쌤

안녕하세요 pom0306님 😀

부모사이즈를 기준으로 움직이고 싶다면, %를 사용하시면 보다 유연하게 애니메이션을 설정할 수 있습니다.
단 %를 쓸 경우 문자로 감싸주셔야 해요!

 

gsap.to(target, {x: '80%'})

 

열심히 시청해주셔서

감사합니다 :)

교재(3쇄)와 강의 내용 문의

0

16

2

섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.

0

19

1

call stack 표현이 잘못표현된것이 아닌가요?

0

50

2

part3. spy 쪽 / part3,part4 강의자료

0

31

2

최종 코드

0

37

2

Open AI 결제

0

39

2

figma 파일을 받을 수가 없어요

0

48

1

React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.

0

34

1

hover pulse animation 관련해서 질문있습니다!

0

78

2

autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요

1

237

2

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

1

485

2

혹시 부드럽게 진입 이후 루프가 가능할까요?

2

213

1

다중요소 제어시 질문드립니다.

1

262

2

timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?

1

479

1

gsap 상업적 사용여부

1

1036

1

fork 주소가 어떻게 되나요?

1

466

1

강사님 다중요소제어 stagger 질문있습니다

2

461

1

노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.

1

724

1

autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?

1

559

1

기초 트위닝 질문

1

381

1

선생님 Advanced 강의가 절실합니다.

1

475

1

어몽이가 안나와요!! 저만 그럴까요?

1

519

2

추후에 반응형에 관련된 강의 내용도 포함될까욥,,?

1

747

1

❗️긴급❗️ 선생님 실습파일이 잘못된것 같습니다.

1

557

1