WEB

RecoilとGSAPのScrollTriggerを使ってスクロールアニメーションを作ってみました〜tailwindcssを添えて〜

nap5

2022.09.26

こんにちは。nap5です。

RecoilとGSAPのScrollTriggerを使ってスクロールアニメーションを作ってみましたので、紹介したいと思います。

Twitterにも投稿してみました。

I mocked this scrollanimation using gsap,framer-motion,recoil,tailwindcss.#react #javascript #gsap #framermotion #recoil #100DaysOfCode #tailwindcss

demo sitehttps://t.co/kTXQWlGA2R

demo codehttps://t.co/utIuqmzVy6

— nap5 (@napzak5) September 24, 2022

A state management library for React.

外部サイト

https://recoiljs.org

外部サイト

https://greensock.com/docs/v3/Plugins/ScrollTrigger

デモサイトです。

Have a nice day

react-marked-caption-line-javascript.onrender.com

外部サイト

https://react-marked-caption-line-javascript.onrender.com

デモコードです。

youthful-minsky-nwibc9 - CodeSandbox

youthful-minsky-nwibc9 by higashi.kota using @emotion/css, @emotion/react, @emotion/styled, @fontsource/inter, framer-motion, gsap, react, react-dom, react-flip-toolkit

外部サイト

https://codesandbox.io/s/nwibc9

キャプションを線で指し示すところをこだわってみました。

簡単ですが、以上です。

WEB