Constructing a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js

Right this moment we’re going to construct an animated, multi-page gallery the place photographs reveal with a WebGL shader as you scroll, after which animate right into a full-size element view if you click on.

To tug this off we’ll mix a number of methods that present up rather a lot in fashionable artistic dev work:

• Syncing WebGL and the DOM so your Three.js planes completely match your HTML photographs
• Clean scrolling that performs properly with a render loop
• Scroll-triggered shader animation to disclose photographs as they enter the viewport
• Seamless web page transitions the place the clicked picture visually travels between pages (with out jumps)

We’ll use Astro to maintain the venture light-weight and straightforward to construction as an actual multi-page website, Barba.js to regulate navigation and run our transition logic, and GSAP (ScrollSmoother, ScrollTrigger, SplitText, Flip) to drive the movement.

Study fashionable net animation utilizing GSAP 3 with 34 hands-on video classes and sensible tasks — excellent for all ability ranges.

Test it out

Establishing our surroundings

That is our preliminary setup:

• A house web page with all the photographs
• A particulars web page for every picture

This shall be our our house web page at index.astro:

---
import Format from '../layouts/Format.astro';
import medias from '../information.json';
import Header from '../parts/header.astro';
---


  

    

    

      

        
        
          
          

            {medias[0].identify}
          
        
        
          
          

            {medias[1].identify}
          
        
        
          
          

            {medias[2].identify}
          
        
        
          
          

            {medias[3].identify}
          
        
        
          
          

            {medias[4].identify}
          
        
        

          Darkish spruce forest frowned on both facet the frozen waterway. The
          timber had been stripped by a current wind of their white masking of
          frost, they usually appeared to lean towards one another, black and ominous,
          within the fading mild. An enormous silence reigned over the land. The land
          itself was a desolation, lifeless, with out motion, so lonely and
          chilly that the spirit of it was not even that of unhappiness. There was a
          trace in it of laughter, however a laughter extra horrible than any
          unhappiness—a laughter that was mirthless because the smile of the sphinx, a
          laughter chilly because the frost and partaking of the grimness of
          infallibility. It was the masterful and incommunicable knowledge of
          eternity laughing on the futility of life and the trouble of life. It
          was the Wild, the savage, frozen-hearted Northland Wild.
        
        
          
          

            {medias[5].identify}
          
        
        
          
          

            {medias[6].identify}
          
        
        
          
          

            {medias[7].identify}
          
        
        

          The person strode forward of the workforce. He was a younger man, tall, robust,
          with mild hair and blue eyes, and his face was expressionless because the
          land he traversed. He carried his rifle loosely in his hand, as if
          it have been a part of his physique, and he swung together with the convenience of lengthy
          familiarity. The lady adopted the sled. She was younger, too, and her
          face bore the stamp of the Northland—endurance and persistence, and a
          obscure trace of struggling. The kid, wrapped in furs, slept within the
          sled, its face peaceable and unconscious of the grim wrestle being
          waged on its behalf.
        
        
          
          

            {medias[8].identify}
          
        
      
    
  
  

    
You may additionally like
    
  

And this shall be our particulars web page template at [index].astro, It’s fetching a information.json file containing all the information and producing a web page for every picture.

---
import Format from '../layouts/Format.astro';
import medias from '../information.json';
import Header from '../parts/header.astro';

export const getStaticPaths = async () => {
  return medias.map((media) => {
    return {
      params: { index: media.index.toString() },
      props: {
        media,
      },
    };
  });
};

const { media } = Astro.props;
---


  

  

    

      ← Index
      
{media.information}
      
{media.location}
      
{media.identify}
    
    

      
    
  

Now Let’s apply some styling and add some information for every picture.

The Format part is the foundation container the place our JavaScript app shall be imported. It’s a template that shall be shared throughout all of the pages of our web site. That’s additionally the place our WebGL canvas shall be sitting

---
import "../types/index.css"
---