---
tags: mk, projects
---

# mk-project-ll-scroll-effects

## first

- https://blog.logrocket.com/react-scroll-animations-framer-motion/

## all

### intersection observer

https://github.com/thebuilder/react-intersection-observer#readme

### framer

- [on variants](https://www.framer.com/docs/animation/#variants)
- [codebox with onscroll framer stuff](https://codesandbox.io/s/0dwbm?file=/src/App.js:0-83) . . . should research
- [framer useMotionValue](https://www.framer.com/docs/motionvalue/#useelementscroll)
- [tutorial on observer-based animations with framer](https://blog.sethcorker.com/react-framer-motion-animate-when-scrolled-into-view/)
- scroll reveal with [mix of intersection observer and framer](https://dev.to/elvis2280/scroll-reveal-with-framer-motion-224) looks good
- long [youtube tutorial on framer](https://www.youtube.com/watch?v=adTm3srZw6E)
- a good starter [text-based framer and intersection-observer tutorial](https://blog.logrocket.com/react-scroll-animations-framer-motion/)
-

### alternatives to framer

- https://blog.logrocket.com/how-build-faster-animation-transitions-react/
- [react-spring](https://react-spring.dev/)
- see especially the cards example
- [transition-hook writeup](https://blog.logrocket.com/how-build-faster-animation-transitions-react/)
- [repo for transition-hook](https://github.com/iamyoki/transition-hook)
-

### page animations

- let's just start [mk-project-page-animations](/KneBG15pSa-mkpoV5FOo9A)

### tools

- [react-scroll](https://www.npmjs.com/package/react-scroll) for animating a scroll

npm i react-scroll

### tutorials
- [react infinite scroll component tutorial](https://www.youtube.com/watch?v=VHf2EM38Ikg)
- [nextjs and framer motion](https://www.youtube.com/watch?v=zIDpZi-36Qs)
- simple [animate on scroll](https://www.youtube.com/watch?v=JcHLxzrsRS4) effects. not amazing but ok as a place to start.
- [text-based react-scroll-parallax](https://dev.to/nyctonio/parallax-in-nextjs-using-react-scroll-parallax-2110) and [youtube react-scroll-paralax tutorial](https://www.youtube.com/watch?v=vPhdhA3lZVs) of the same thing

- [framer-motion](https://www.framer.com/docs/layoutcamera/)

### side quests

- [prisma](https://formidable.com/blog/2021/prisma-orm/) and the q of what we should be doing now with data in any case
- [using dev.to as cms with next](https://dev.to/jameswallis/i-completely-rewrote-my-personal-website-using-dev-to-as-a-cms-2pje) by a guy with lots of good nextjs

## concepts

on white, like


alternatively 3D on infinite bg matching site