Having objects appear on scroll is a common feature in web development. However, the options in HTML are limited. To add some excitement, you can incorporate WebGL effects. Let’s start with a simple PlaneGeometry object with a ShaderMaterial. This combination offers various possibilities. You can explore pixelated effects by rounding the UVs to the nearest pixel. To achieve this effect, you can use the following code:

“`html
vec2 uv = floor(vUv * 10.0) / 10.0;
“`

By sampling the texture with these UVs, you will get the pixelated effect. To highlight the effect, you can add borders to each pixel. Keep in mind that if the image is not a square, the pixels won’t be squares either. To solve this, you can use the following code:

“`html
vec2 gridSize = vec2(20., floor(20./ASPECT_RATIO));
vec2 uv = floor(vUv * gridSize) / gridSize;
“`

Next, you can add a background curtain and a changing amount of pixillation for additional effects. To connect HTML and the WebGL effect, you can use React Three Fiber and its Drei library, which provides a `` component. This component allows you to insert parts of your 3D scene into your HTML. You can control these objects using native HTML events. Here is an example:

“`html

To animate the objects on scroll, you can use the native IntersectionObserver API along with GSAP, a popular animation library. The useGSAP hook provided by GSAP allows you to trigger animations based on the isIntersecting parameter from IntersectionObserver. Here is an example:

“`html
import { useGSAP } from “@gsap/react”;
import gsap from “gsap”;
…
useGSAP(() => {
gsap.to(material, { uProgress: isIntersecting ? 1 : 0, duration: 1.5 });
}, [isIntersecting]);
“`

To synchronize the scrolling between HTML and WebGL, you need to use a custom scroll solution like Lenis or Locomotive scroll. In this example, Lenis is used as a global effect inside React Three Fiber:

“`html
import { addEffect } from “@react-three/fiber”;
import Lenis from “@studio-freight/lenis”;
const lenis = new Lenis();
addEffect((t) => lenis.raf(t));
“`

Finally, it’s important to note that HTML and WebGL are separate worlds. Although they can be mixed declaratively, certain React Three Fiber hooks may not work with `` components. Keep this in mind when developing your integration. Despite the complexities involved, React simplifies the integration process. Consider using React for animated scrollable landings when the integration is straightforward.



Source link