---
# System prepended metadata

title: mk-project-ll-scroll-effects
tags: [mk, ' projects']

---

---
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


![alt text](https://files.slack.com/files-pri/T0HTW3H0V-F03LP76KN4Q/bok-sem-board.jpg?pub_secret=ff0e149142)

alternatively 3D on infinite bg matching site

