hulk510 / playground

This is frontend playground with monorepo for WAI(haruka). created by turbo.
https://haruka.dad
0 stars 0 forks source link

scroll animationを作る #618

Open hulk510 opened 1 week ago

hulk510 commented 1 week ago

ポンデリングが傾いたみたいな画像がドーナッツ状にあってスクロールするとアニメーションが動いて画像が切り替わる。 選択してる画像が画面いっぱいに出るみたいなアニメーションを作りたい。

photoshopとかで作ったものを洒落た感じで出したい。

hulk510 commented 1 week ago

https://qiita.com/degudegu2510/items/9fa70a8b5284e37f2fe3

こういうtimelineみたいなのを使うと実現できるのかな? framer-motionにもなんかあった気もする

hulk510 commented 1 week ago

パララックスアニメーションとかスクロールアニメーションとかになるのかな?

hulk510 commented 1 week ago

https://codesandbox.io/s/9s2wd9

イメージこんなの。 スクロールアニメーションでやるより、こういう3D用のアニメーションライブラリの方が実装簡単なのかな?

↑はhttps://docs.pmnd.rs/react-three-fiber/getting-started/introduction#first-steps react-three-fiberってやつ。 three.jsみたいなのをreactで扱い安くしたみたいなライブラリなのかな?使ったことないからわからん。

hulk510 commented 1 week ago

https://www.framer.com/motion/scroll-animations/

framer-motionでもできなくはないのかなー?