Jump to content
Search Community

bayti

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by bayti

    Need help with triggering canvas animation by scroll of other div

    in GSAP

    Posted

    I've managed to find the solution which was really simple, I'm going to post it here for anyone in the future trying the same thing and close the post.

    All that was need was to add 

    scroller: "#home-container",

    under the scrollTrigger like so

    gsap.to(airpods, {
          frame: frameCount - 1,
          snap: "frame",
          ease: "none",
          scrollTrigger: {
            scroller: "#home-container",
            scrub: 0.5
          },
          onUpdate: render
        });

    Need help with triggering canvas animation by scroll of other div

    in GSAP

    Posted

    This is probably really obvious, but i can't make it work.

    Basically I adapted the code from the given codepen to my react project but I can't get it to work in the way I want.

    What I'm trying to do is make use of image sequence animation triggered by scrolling while also snapping to full screen sections.

    I've managed making these work individually but when I tried combining them is when I ran into trouble.

    The conclusion I came to is: the way I have it setup now, for the scroll snapping to work is body overflow:hidden and everything is taking place in a container div configured for snapping which is scrolling. Now the canvas animation is not triggering because it is expecting for the window to scroll which is not actually happening it is the div that is. I think the solution should be me directing and giving the right scroller  to ScrollTrigger but I can't get it to work. I'm going to share the code below and I thank anyone in advance for any help provided.

     

    index.css

    Quote
    body{
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow: hidden;/* Delete for canvas*/
    }
     
    #home-container {
      background: rgb(10, 10, 10);
      margin: 0;
      overflow-y: scroll; /* Delete for canvas*/
      height: 100vh; /* Delete for canvas*/
      scroll-snap-type: y mandatory; /* Delete for canvas*/
    }
     
    #home-section{
      height: 100vh;
      scroll-snap-align: center; /* Delete for canvas*/
      position: relative;
    }
     
    #hero-lightpass {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 100vw;
      max-height: 100vh;
    }

     

    Home.js

    Quote
    import React,{ useEffect } from "react";
    import "../index.css";
    import { gsap } from "gsap";
    import { ScrollTrigger } from "gsap/ScrollTrigger";
     
    gsap.registerPlugin(ScrollTrigger);
     
    function Home(){
     
      useEffect(() => {
     
        const canvas = document.getElementById("hero-lightpass");
        const context = canvas.getContext("2d");
     
        canvas.width = 1158;
        canvas.height = 770;
     
        const frameCount = 147;
        const currentFrame = index => (
          `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${(index + 1).toString().padStart(4, '0')}.jpg`
        );
     
        const images = []
        const airpods = {
          frame: 0
        };
     
        for (let i = 0; i < frameCount; i++) {
          const img = new Image();
          img.src = currentFrame(i);
          images.push(img);
        }
     
        gsap.to(airpods, {
          frame: frameCount - 1,
          snap: "frame",
          ease: "none",
          scrollTrigger: {
            scrub: 0.5
          },
          onUpdate: render
        });
     
        images[0].onload = render;
     
        function render() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.drawImage(images[airpods.frame], 0, 0);
        }
     
      }, []);
     
      return(
         
          <div id="home-container" className="scroll-smooth left-0 right-0 z-1 w-full">
            <canvas id="hero-lightpass">Your browser does not support the canvas tag.</canvas>
            <div id="home-section" className="snap-center w-full p-0 m-0 bg-teal-900/30">
              <h1>1</h1>
            </div>
            <div id="home-section" className="snap-center w-full p-0 m-0 bg-red-900/30">
              <h1>2</h1>
            </div>
            <div id="home-section" className="snap-center w-full p-0 m-0 bg-teal-900/30">
              <h1>3</h1>
            </div>
            <div id="home-section" className="snap-center w-full p-0 m-0 bg-red-900/30">
              <h1>4</h1>
            </div>
            <div id="home-section" className="snap-center w-full p-0 m-0 bg-teal-900/30">
              <h1>5</h1>
            </div>
          </div>
     
        );
    }
     
    export default Home;

     

     

    Solutions I tried are a combination of the code below:

    Quote
    const scroller = document.getElementById("home-container");
     
    ScrollTrigger.defaults({
          scroller: scroller,
        });
     
        gsap.to(airpods, {
          frame: frameCount - 1,
          snap: "frame",
          ease: "none",
          ScrollTrigger:{
            trigger: scroller,
            scrub: true,
            scrub: 0.5
          },
          onUpdate: render
        });
     
        ScrollTrigger.scrollerProxy(scroller, {
          scrub: 0.5
        })

     

    I should mention that using this code above made the animation play trough once upon refreshing the site but it would not respond to the scroller.

     

    I'm sorry if the post is breaking any forum rules and if I didn't explain the problem quite as well as I could've.

    See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

×
×
  • Create New...