Team Obsidian Website

started using prettier. first time using it or anything like it. its actually pretty cool, i will definitely use it for most of my projects moving forward. i also tried creating a loading screen since its kind of necessary bc loading all those images is kind of slow. didnt really work. i thought it did but apparently i messed something up so i just removed it. on the plus side, the portal animation doesnt have flickering textures anymore. theres actually a bigger problem which has nothing to do with how the websites made: our team rebranded. its now called team synapse (although i preferred synapse studios), has a new logo and color. how the heck am i supposed to make a website with the color orange?!

been really locked in on the website lately. i invited my other team member to help me but he hasnt done much except update the description. anyway, i reworked the carousel to be horizontal which looks much nicer, used canvas for the portal intro animation instead of switching between image srcs and i also preloaded the intro animation images as well. after that i did a ton of cleanup and refactoring, including creating an entirely new file structure separating all the components and subcomponents properly and separating the animations for those components into their own files. and i finally pushed those changes i made to the particle field. 5.5 hrs of work and it looks pretty much finished. i still want to look into optimizing the site, especially with all those images, and then of course seo, which i’ve never dealt with before. btw you can view the website on vercel, the link is on the github repo. and now im just realizing i need a readme bc rn its the default nextjs readme.

added animations to the gallery (looks awesome now). also started using a delay on scrollTrigger’s scrub property. for example, for the parallax and the gallery loading. also made the gallery images link to their source so that people can click on it for the image. here’s a video with all the changes.

spent a while trying to refactor the team section, but i ended up reverting all the changes bc i kept messing things up and it was getting annoying. i did add a footer and a gallery though, which look really nice. i also tried changing the particles in the back, using circles instead of minecraft letters. i havent committed the particle changes bc i dont know if im going to keep them or not.

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.

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

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.

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.

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.

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

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