gsap is a javascript animation library. it has a huge amount of functionality for all sorts of different purposes. what stands out to me the most however, are the ways it lets you implement interactivity using draggable elements. these are the various things i've done with it
spinnable logo
header on the homepage. this functionality is what hooked me in to gsap specifically. after importing the libraries, this is literally all of the code required to make the logo spin:
const draggableLogo = Draggable.create("#logo", {type: "rotation",inertia: true });
the head
in the art section of my house page, based on this codepen. most of the functionality is already present there, i pretty much just changed the image and play a sound effect whenever it detects a collision. simple enough, but hands down one of my favorite things on the site lol
bugs
footer on the homepage, based on this codepen. i don't know why, but i needed the bugs to be draggable on both the x and y axes. it took a very long time to get it to work right, and i couldn't even tell you what i did anymore. it's a bit awkward on this page since it's intended to be a footer so they can only be dragged upwards. but it still works and is very silly
games page
i'm not moving this one onto the page so just go look at it
based on this codepen. it's a bit of a blur now, but i remember spending a lot of time tweaking this to get it to feel right for practically navigating a page. there also exists a bug that i could never fix, where everything just breaks if you spam click the navigation arrows. no idea why that happens lol