How To Scrollytell

deployed to github pages. formatted with prettier. i used github copilot to add some “Quick Notes” to the demo by using what i already wrote in the README. improved some of the text the same way and added better comments. this is the only part of the project where i used ai. i still need to update some of the notes to include stuff i learnt while making an actual website with gsap

spent 3 hours figuring out GSAP’s Flip plugin. its honestly amazing, but i had a hard time getting it to work. i can already think of a lot of uses for it

learnt Three.js and how to animate models with GSAP.

for the past few days, i’ve been working on an actual website implementing some of these techniques. i learned a lot, like how to make hover animations, video animations, and most importantly i learned that GSAP’s pin is far superior to position: sticky and is more flexible. i dont really have any good pictures so here’s a picture of the site i was working on.

finally animated videos on scroll! it was pretty easy actually, since GSAP had an onUpdate() callback i could use in animations. its kinda laggy tho. i would record a video but i already launched battefield 6 sooooo… Here’s a picture of all the commits from today

wrote about gsap timeline. made this cool animation with cards. It made me realize that i also need to figure out how to do hover animations, probably with GSAP’s Observer plugin. I’m starting to really appreciate the GSAP system. definitely using it over Framer Motion from now on.

so i just spent like 50 mins trying to make this one transition i saw on a website. basically a curved container with a different background begins to cover the viewport and then transitions into the next scene. I ended up doing it a little differently by making the rounded corners animate to flat again. the website used a parallax effect but i found that was a little difficult so i improvised. i also added some parallax and scaling to the text on the next scene, just to see how it would look. the website i was looking at was https://sav1n.com/. i also finally recorded my demo site

ok just finished up with writing about

i forgot i started writing this and kept working. whoops. i was about to say that i just finished writing in the README on svg manipulating and already started on parallax. now im actually done parallax. it wasnt too hard once i thought about it. i was kinda sad i couldnt use GSAP’s ScrollSmoother tho since they make it really easy and add some useful stuff too.

ONE AND A HALF HOURS LATER…
damn GSAP’s SVG plugins are hard. well really it was just DrawSVG. i didnt really read the docs very closely to begin with so i didnt know that it only affects strokes in an svg not fill. stroke-only svgs are very hard to find it seems. i ended up copying one off a GSAP demo. as for MorphSVG, that was a bit easier. i have yet to write in the README about all this so I’ll commit after i do that. another thing i realized is that GSAP’s “pin” is almost certainly better than “position: sticky” at least when u have multiple sticky objects in the scene since with sticky positioning they just collect on top of each other at the bottom of the scene container when it starts to leave the viewport. here’s a picture of the orange svg being drawn. i know, i should record it, im just too lazy to launch obs rn.

made a CONTRIBUTING.md. hope people will actually contribute but not expecting it. I also compiled a list of scroll-driven techniques to experiment with such as:
Horizontal Scroll
Parallax
SVG Morphing
Video
3D Models
Graphs

im think im going to try taking a look at SVGs next. either that or parallax

figured out the zoom effect! was reading through GSAP docs and found a property called pin, which does essentially the same thing as position: sticky but works even with overflow: hidden. now i can use overflow: hidden on the scene contanier to hide the horizontal scrollbar and pin the object in the viewport, scale it up and then transition to the next scene container, whose background perfectly matches that of the scaled-up object. I also found some cool new plugins when looking through the GSAP docs such as SplitText and DrawSVG. I wrote a bit about using SplitText and im definitely planning on experimenting with DrawSVG later. I also committed it all to a github repo, including both my notes and my experiments.

I had already figured out how to do basic “sticky scenes” as i call them but i’m currently trying to do a zoom-in effect. my initial idea was:

1. Start with a single sticky object in the scene container
2. Animate that object to scale until it fills the entire viewport. You should have overflow-x: hidden to prevent the horizontal scrollbar from appearing.
3. Create a new div with the same color as the zoomed-in object and fade it in on top of the old object.
4. The sticky scene should end and the new div is now the scene container.
   The only problem is that position: sticky doesnt work if you have overflow-x-hidden.
   Also, I haven’t yet committed any of this to a github repo bc im not sure how its going to turn out. I’ll probably do it after i figure out the zoom effect.

basically been messing around with Lenis and GSAP until I realized there’s not a lot of help online for common scrollytelling techniques, so i decided i might as well format the notes i was already creating so that others don’t have to figure it out for themselves. i actually discovered scrollytelling from fellow hackclubbers participating in Summer of Making who used Lenis in their portfolios.