We got down to create a digital presence that displays INK Video games’ ambition and showcases the dimensions of their work in a means that feels daring, trendy, and unmistakably theirs.
Tech Stack and Instruments
Like most of our tasks, INK Video games is constructed on high of ToyBox, our Subsequent.js starter mission.
CSS is dealt with with Styled Elements and, as all the time, it includes a bunch of scroll triggered animations, cut up texts, and cursor interactions, that are all dealt with with GSAP. Add in Lenis for clean scrolling and React Three Fiber (R3F) for all of your 3D wants and you’ve got a stable base.
One extra requirement for this mission was to make use of a self-hosted, headless CMS. For this we selected Strapi.
Not Fairly 3D
The web site options many 3D components, however not all of them use WebGL. Some sections have movies and pictures which rotate relying on the cursor place. We needed to have a 3D perspective impact, the place the picture nearly felt like a portal. We created a part, made to work with each photos and movies and achieved the impact by mixing CSS 3D rotation and translating the picture inside to pretend perspective.
We use <a href="https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/">gsap.matchMedia</a> to deal with the rotation on desktop solely, and animate each the wrapper’s rotation and the inside picture’s place with gsap.to on mouse motion.
Precise 3D
One of many challenges for this mission was dealing with a number of 3D sections on the identical web page. We may simply have a canvas for every part, however having a number of canvases can actually kill efficiency and a few browsers restrict what number of 3D contexts you’ll be able to have on the similar time. We determined that each 3D part in a web page wanted to make use of the identical canvas.
R3F (extra exactly Drei) has a View part that’s actually helpful. It makes use of WebGL’s scissor technique to attract in a particular portion of a hard and fast canvas. We added a canvas to our Format part in order that it appeared on each web page of the location, and within it a View.Port part, which tells R3F the place the View elements have to be rendered. Then, every of our sections utilizing 3D is wrapped in a View part, which permits R3F to trace the dimensions and place of the container wherein we need to render our 3D scene, and render the scene within the corresponding portion of the canvas.
The ultimate a part of our canvas preparation was so as to add some customized logic to dictate when the body loop must be working, based mostly on whether or not any 3D components have been seen or whether or not the web page was resizing or scrolling.
To find out if any 3D part is seen, we used ScrollTrigger on every part, and up to date whether or not it was seen or not with the onToggle callback.
Fashions
The trickiest half is finished! Now we have to determine how one can finest import the 3D fashions to our mission. Fortunately there’s an incredible command-line instrument that may do a lot of the work for us. Operating a GLTF mannequin by way of gltfjsx compresses and optimizes our mannequin, and creates a JSX file which may then be imported into our scenes.
These JSX recordsdata are additionally helpful if we need to change some issues dynamically in our mannequin, like the fabric. We will add props to the part that was generated, and alter issues accordingly.
Portal playing cards
A extremely attention-grabbing part to work on was the portal playing cards part. The playing cards wanted to do a number of issues:
- To rotate with the cursor
- To have HTML textual content
- To have a background picture with perspective/parallax
- To have 3D components masked inside the card bounds
- To have 3D components seen exterior of the cardboard bounds
We managed to make them work by mixing a number of strategies.
Establishing the playing cards
Initially, we’ve each 3D components and DOM components which are positioned and sized in the identical means. The DOM components include the textual content solely, and the remaining is in 3D.
We take heed to the mouse occasions and compute the rotation based on the DOM components, and apply the rotation each to the 3D components and DOM components on every body.
We cheat a bit to make issues simpler and apply a CSS perspective worth to the DOM container wherein we’ve our playing cards, computed based mostly on the 3D viewport issue worth.
For the background picture, we use the R3F Billboard part, which makes positive the picture all the time faces the digital camera, and we make the picture a bit additional away from the digital camera and a bit larger than the container, for the parallax impact.
To have the weather masked inside the card bounds, we use the R3F Masks part. This makes use of WebGL’s stencil buffer to chop out components of the scene. We will wrap our card geometry with the Masks part, after which use the useMask hook to get a stencil worth that must be utilized by each factor that might be masked’s materials (the background picture in addition to the 3D fashions). That is the place having our fashions as JSX elements the place we will dynamically change the fabric will be helpful.
Lastly, for the weather seen exterior the cardboard bounds, we’d like clipping planes. We use a airplane, which matches the cardboard’s rotation to clip sure components of the 3D components. At any time when we replace the cardboard’s 3D rotation, we reset the airplane to observe the Z axis once more, after which apply the cardboard’s 3D factor’s world matrix to it.
We will now add the identical fashions, that are masked inside the card, a second time, however this time with out stencil and with clipping planes. These components will solely be proven exterior the cardboard’s bounds.
Animate the playing cards
As soon as every part is about up, we will add some animations.
First, we wish the playing cards to rotate with our cursor. Since this could solely occur on desktop, we use gsap.matchMedia to deal with mouse occasions.
Relying on the cursor place, we will now compute a goal rotation for the cardboard, and lerp the present rotation in direction of it on every body.
Lastly, we need to add a pleasant reveal animation for the playing cards, so we will use Scroll Set off to set off an animation when the part is in view, and animate the cardboard’s goal rotation from PI to 0.
Conclusion
This mission was fairly difficult, particularly within the 3D setup, but it surely was nice to work on.
GSAP will be of nice assist for tasks with plenty of animations, particularly when these are triggered with scroll. It’s such a versatile instrument that it had us lined whether or not we have been including parallax to a easy DOM factor or updating values to be fed into R3F body loops.
We’re actually pleased with the way it turned out 🙂
Our Stack
- Subsequent.js Framework
- GSAP for animation
- Lenis for scroll
- React Three Fiber + drei for WebGL
- Strapi for CMS
