inflearn logo
강의

講義

知識共有

Webアニメーションの新しい標準、Web Animations API

scrollTimeline polyfill 에 관해서

812

qwe62939130

投稿した質問数 26

0

안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다!

추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?!

https://github.com/flackr/scroll-timeline/issues/64

HTML/CSS javascript 웹-디자인 인터랙티브-웹 frontend

回答 1

1

studiomeal

아무래도 스펙 자체가 아직 개발 진행 중인 상황이다보니, CSS의 animation-timeline 속성 등 차후 일부 변경점이 있긴 할 것 같아요. 스크롤 타임라인은 현재 시점에서는 폴리필을 사용할 수 밖에 없어서, 일단은 여러 브라우저에서 안정적으로 동작하는 스크립트로 사용하시되, 차후 업데이트 되는 방향으로 개선해나가면 좋을 것 같습니다 :)

리액트 관련해서는 오래전에 나온 것이기는 한데, https://www.npmjs.com/package/react-web-animation 를 한번 살펴보셔도 좋을 것 같아요. 저도 사용해 보진 않았습니다.

1

qwe62939130

앗 그렇군요.. 스펙이 빨리 정해지고 출시되면 좋겠네요 ㅠㅠㅠ 빠른 답변과 npm 패키지 공유 감사합니다!!

6-6

0

12

1

Json 플러그인 사용시 variable collection 없음

0

14

1

배리어블 목록 없음

0

23

3

Token 등록 방법 문의

0

21

1

스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여

0

133

1

vscode에서 svg파일 불러오기 질문

0

3763

1

모바일 화면 최적화 방법 질문드립니다!

0

229

1

key.svg 이미지

1

209

1

Vue.js 적용 방법

0

278

1

강사님 vscode 폰트와 색상이 뭔가요

0

648

2

2:20분 이해가 가지 않습니다.

0

284

1

web animation api를 통한 apple page

0

490

2

리액트에서 scroll-timeline.js 불러오는 법

0

726

1

특정 시점에 자바스크립트 호출은 어려울까요?

0

320

2

section04 - 각각의 객체에 개별 애니메이션 적용하기

0

461

3

scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?

0

736

2

scroll-timeline.js 파일

0

544

1

선생님 Section4에 제목 오타난것같습니다!

0

389

1

keyframeEffect를 찾을 수 없다고 나와요

0

504

1

제이쿼리 animate()와는 다른걸까요?

0

402

1

scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??

0

559

1

넓이를 %로 적용하긴 어려울까요?

0

434

2

아직 강의를 보진 않았는데

2

575

1

이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?

0

1151

2