Jump to content
Search Community

Translate a Working Code (for Scroll Animation of SpriteSheet Image) to a Next.js Code

talkingSkunk test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello,

I have a working Code for a scroll animation using a Sprite Sheet image, filling up the entire viewport as desired. 

But I would like to make one in a Next.js or React.js code.  I would post my Next.js progress, but nothing is working anyway.

 

I am having issue with making the JSX acknowledge the DOM with "useRef", and trying to work around "new Image" with something else in Next.js.

 

Help would be appreciated.

Below is the working code:

HTML:

    <section class="scene section section-one">
        <canvas class="viewer viewer-one"></canvas>
    </section>

 

CSS:

html,
body {
  height:100%;
  background: #021c53;
}

.section {
  height: 50%;
  background: black;
  color: white;
}

.scene {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: black;
  background: #333;
}

.viewer {
  width: 100%;
  height: auto;
}

JS:

gsap.registerPlugin(ScrollTrigger);


const rows = 5
const columns = 10
const frame_count = rows * columns - 1
// const imageWidth = 6336
// const imageHeight = 1782
const imageWidth = 4049
const imageHeight = 3000
const horizDiff = imageWidth / columns
const vertDiff = imageHeight / rows

const viewer = document.querySelector(".viewer-one");
const ctx = viewer.getContext("2d");
viewer.width = horizDiff;
viewer.height = vertDiff;

const image = new Image();
// image.src = "./spriteDesk.jpg";
image.src = "./spriteMobile.jpg";
image.onload = () => onUpdate();

const setPos = gsap.quickSetter(".viewer-one", "background-position");

const obj = {num: 0};
gsap.to(obj, {
  num: frame_count,
  ease: "steps(" + frame_count + ")",
  scrollTrigger: {
    trigger: ".section-one",
    start: "top top",
    end: "+=" + imageHeight,
    pin: true,
    anticipatePin: 1,
    scrub: 1
  },
  onUpdate
});

function onUpdate() {
  ctx.clearRect(0, 0, horizDiff, vertDiff);
  const x = Math.round((obj.num % columns) * horizDiff);
  const y = Math.round(Math.floor(obj.num / columns) * vertDiff);
  ctx.drawImage(image, x, y, horizDiff, vertDiff, 0, 0, horizDiff, vertDiff);
}

 

Link to comment
Share on other sites

On 5/20/2021 at 12:39 AM, OSUblake said:

Maybe this can help you get started.

https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react

 

new Image() should work anywhere. 

Thank you for the reply. But I am still struggling with making new Image() work inside Next.js. It is throwing an error, so I did the following, but still not working.  Any insight would be appreciated:

import Link from 'next/link'
import Head from 'next/head'
import Image from 'next/image'
import {useEffect, useRef, useState} from 'react'
import styles from '../styles/Home.module.css'
import {gsap} from 'gsap'
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const Home = () => {

  const viewer = useRef(null)
  const image = useRef(null)

  if (typeof window !== "undefined") {
    gsap.registerPlugin(ScrollTrigger);
  }
  
  useEffect(()=>{

    const rows = 5
    const columns = 10
    const frame_count = rows * columns - 1
    // const imageWidth = 6336
    // const imageHeight = 1782
    const imageWidth = 4049
    const imageHeight = 3000
    const horizDiff = imageWidth / columns
    const vertDiff = imageHeight / rows
  
    const ctx = viewer.current.getContext("2d");
    viewer.current.width = horizDiff;
    viewer.current.height = vertDiff;
  

    // image.src = "./spriteDesk.jpg";
    // image.src = "./spriteMobile.jpg";
    image.onload = () => onUpdate();
  
    const setPos = gsap.quickSetter(viewer.current, "background-position");
  
    const obj = {num: 0};
    gsap.to(obj, {
      num: frame_count,
      ease: "steps(" + frame_count + ")",
      scrollTrigger: {
        trigger: ".section-one",
        start: "top top",
        end: "+=" + imageHeight,
        pin: true,
        anticipatePin: 1,
        scrub: 1
      },
      onUpdate
    });
  
    function onUpdate() {
      ctx.clearRect(0, 0, horizDiff, vertDiff);
      const x = Math.round((obj.num % columns) * horizDiff);
      const y = Math.round(Math.floor(obj.num / columns) * vertDiff);
      ctx.drawImage(image, x, y, horizDiff, vertDiff, 0, 0, horizDiff, vertDiff);
    }
  },[])





  return (
    <>
      <Head>
        <title>TalkingSkunk | Home</title>
        <meta name='keywords' content='talkingskunk' />
        <link rel="icon" href="/favicon.ico" />
      </Head>

  

  


      <section className="styles.scene styles.section section-one">
      <Image ref={image} src ='/spriteDesk.jpg' alt="spriteDesk" width ={4049} height = {3000} />
        <canvas ref={viewer} className="styles.viewer"></canvas>
      </section>

    </>
  )
}

export default Home;

 

Link to comment
Share on other sites

  • Solution
12 hours ago, talkingSkunk said:

This was the original error that I received, if I put new Image().

 

You're probably trying to create a next image as you gave it the same name. Get rid of that import... 

import Image from 'next/image'

 

or name it something else.

import Img from "next/image"

 

Image is a built in constructor.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

 

Alternate way to create an image.

const image = document.createElement("img");

 

  • Thanks 1
Link to comment
Share on other sites

56 minutes ago, OSUblake said:

 

You're probably trying to create a next image as you gave it the same name. Get rid of that import... 


import Image from 'next/image'

 

or name it something else.


import Img from "next/image"

 

Image is a built in constructor.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

 

Alternate way to create an image.


const image = document.createElement("img");

 

That worked! Thank you very much for your help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...