7 devlogs
11h 44m 7s
A Next.js website for Team Obsidian, a Minecraft modding team that I’m a part of.
added a progress indicator for the carousel. unfortunately they’re both positioned absolutely so it gets messed up when the screen size changes. def gotta fix that. i also noticed something really important. when looking at others websites, specifically GSAP’s showcase site, i noticed that they dont have to make scene containers super tall in order to have sticky objects. it turns out they were using GSAP’s pin which I already discovered but didnt really understand how useful it was. instead of creating really tall containers to hold the sticky objects while you scroll down you can just pin the whole scene container with gsap and define how long you want it to stay like that. the other animations work as usual and can still work on scroll. I replaced the sticky positioning in the inhabitants section with that and i plan to do so with as much of the rest of the site as i can.
0
Log in to leave a comment
decided to make a carousel for the mobs features in Inhabitants. doesnt look too bad but the images are positioned absolute and their parent’s sizing is messed up. its fine tho ig. ts gonna look terrible on mobile. i also changed the font. oh and did i mention its on github now? it still looks like a beginner made it, which to be fair, is accurate
0
Log in to leave a comment
tried my best to make the member cards glassy. doesnt look too bad but not what i imagined. i like the blur though. I also made a transition to the mod section. i added a glow to the bottom of the team section to break up the black background a bit. i also started on the mods section but im not sure how to go about it.
0
Log in to leave a comment
had a random idea for the next scene. show the team obsidian logo and have some parallax objects behind it. i decided to use Minecraft’s enchantment alphabet. it’s a little heavy for the client so i’m not sure if im going to keep it. i also definitely need to find some way to measure performance.
and i did it again. i forgot i was writing this devlog and kept working. now i just finished with the team section. it shows a circular profile pic for each person but when you hover over it the card surrounding the picture appears which has more information.
0
Log in to leave a comment
basically copied a part from the old website. when you first load, it shows a nether portal with some mobs around it and when you scroll it zooms into the portal and then shows the main page. i just recreated that, except with gsap (which has scrubbing). i also tried to make it as performant as possible by getting rid of the image entirely when the animation is finished playing. im going to try and make the ScrollImage component that i made for it a little more modular now. here’s a video of the animation and some of the code. it basically just loops through animation frames captured in blender. Jeremy said he’d make a version with more image frames or give me a video i can use instead so we can make it smoother.
0
Log in to leave a comment
ok fixed a minor mistake. i thought i had to wrap the ReactLenis component around my content but you’re actually supposed to just leave it as a standalone component at the top. ig i kinda skimmed the docs since there’s an example of this on there. i had to go back and fix this on my other projects as well. here’s a picture of the docs and then a picture of what my code is now. before, i had the AnimationWrapper (which is essentially the ReactLenis component) wrap around the other content
0
Log in to leave a comment
ok took a while looking at what we already have (what Jeremy already made). he used framer motion instead of gsap tho. i decided that its probably best to just redo the whole website instead of trying to make changes to the existing one. it will probably take me less time and the result will be better and with less clutter from old code. I created a new Next.js app and tried setting up GSAP + Lenis like I have with other React apps. I immediately ran into some problems with SSR. this is my first time using Next.js so it took some getting used to. I separated the basic HTML from the animations so that the animations would run directly on the client and the HTML could be rendered server side. i had to implement a mount check to see if the elements were in the DOM before the animations tried to run. i havent yet made a github repo but here’s a screenshot of some of my code. its an AnimationWrapper which returns a ReactLenis element and passes down children. it handles all the gsap animations as well, calling Animate()
0
Log in to leave a comment