11 devlogs
16h 26m 2s
A collection of notes and demos that I made myself to teach others the general techniques of scrollytelling.
learnt Three.js and how to animate models with GSAP.
0
Log in to leave a comment
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.
0
Log in to leave a comment
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
0
Log in to leave a comment
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.
0
Log in to leave a comment
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
0
Log in to leave a comment
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.
0
Log in to leave a comment
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.
0
Log in to leave a comment
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
0
Log in to leave a comment
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.
0
Log in to leave a comment
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:
- Start with a single sticky object in the scene container
- Animate that object to scale until it fills the entire viewport. You should have
overflow-x: hiddento prevent the horizontal scrollbar from appearing. - Create a new
divwith the same color as the zoomed-in object and fade it in on top of the old object. - The sticky scene should end and the new
divis now the scene container.
The only problem is thatposition: stickydoesnt work if you haveoverflow-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.
0
Log in to leave a comment
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.
0
Log in to leave a comment