Jump to content
Search Community

talkingSkunk

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Everything posted by talkingSkunk

  1. talkingSkunk
    That worked! Thank you very much for your help.
  2. talkingSkunk
    This was the original error that I received, if I put new Image(). Help?
  3. talkingSkunk
    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;
  4. talkingSkunk
    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); }
  5. talkingSkunk
    I tried the second code, and it worked. Thank you!
  6. talkingSkunk
    Thank you for this. How would you make sure the individual frame fills up the viewport? I am struggling to get my frame fill up the viewport. Help from anyone would be appreciated. Here is my JS: const rows = 5 const columns = 10 const frame_count = rows * columns - 1 const imageWidth = 6336 const imageHeight = 1782 const horizDiff = imageWidth / columns const vertDiff = imageHeight / rows gsap.set(".viewer-one", {width: horizDiff, height: vertDiff}); 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: () => setPos(` ${-Math.round((obj.num % columns) * horizDiff)}px ${-Math.round(Math.floor(obj.num / columns) * vertDiff)}px `) });
  7. talkingSkunk
    Thank you for this work. I am using it as a template for my own sprite sheet images, but I am struggling to make the container fill the viewport. The image just will not change its height and width to fill the viewport. Help would be appreciated.
  8. talkingSkunk
    Hello, I'm using the codepen as a template to create a scroll animation with a sprite sheet. My challenge now is to fill the entire viewport with the image, but I am struggling, as the image remains a small size. How would you increase the spritesheet image (individual image size is relatively smaller than viewport), so the image will fill the screen as you scroll? Help would be appreciated. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script> <script src="./index.js" defer></script> </head> <body> <section class="scene section section-one"> <div class="viewer viewer-one"></div> </section> </body> </html> CSS: html, body { height:100%; background: #021c53; } .section { height: 100%; background: black; color: white; } .scene { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background: black; } .viewer { max-width: 100%; max-height: 100%; margin-left: auto; margin-right: auto; object-fit: contain; background-image: url('./spriteDesk.jpg'); /* background-size: 11580px 11550px; */ background-repeat: no-repeat; background-position: 0 0; } JS: const rows = 5 const columns = 10 const frame_count = rows * columns const imageWidth = 6336 const imageHeight = 1782 const horizDiff = imageWidth / columns const vertDiff = imageHeight / rows gsap.set(".viewer-one", {width: horizDiff, height: vertDiff}); 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: () => setPos(` ${-Math.round((obj.num % columns) * horizDiff)}px ${-Math.round(Math.floor(obj.num / columns) * vertDiff)}px `) });
  9. talkingSkunk
    I am trying to create scroll animation using scrollTrigger plugin on my Next.js, but I'm getting error "cannot read property "_gsap" of undefined, etc. I have a spritesheet of 50 images (1.5 MB), that would be providing the scroll images. I have looked at these two, which was helpful, but only it doesn't translate very well into use for Next.js. Help 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 imageViewer = useRef(null) const imageScene = useRef(null) console.log('imageID', imageViewer) // if (process.client) { // } gsap.registerPlugin(ScrollTrigger) let frame_count = 9 let offset_value = 100 gsap.to(imageViewer.current, { // backgroundPosition: (-offset_value * frame_count * 2) + "px 50%", // ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet scrollTrigger: { trigger: imageScene.current, start: "top top", end: "+=" + (frame_count * offset_value), pin: true, scrub: true } }) return ( <> <Head> <title>TalkingSkunk | Home</title> <meta name='keywords' content='talkingskunk' /> <link rel="icon" href="/favicon.ico" /> {/* <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script> */} </Head> {/* <div className={styles.bgWrap}> <Image src="/home.png" className='cityscape' data-speed="0.2" layout="fill" objectFit="cover" quality={100} /> </div> */} <div className={`${styles.header} ${styles.section}`}> <div className={styles.center}>&darr;START</div> </div> <p className={styles.bgText}> Discover </p> <div ref={imageScene} className={`${styles.scene} ${styles.section}`} id="sticky"> <div ref={imageViewer} className={styles.viewer}></div> </div> <div className={styles.section}> <div className={styles.center}>End</div> </div> <div className={styles.canvas}> </div> <div className={styles.body}> </div> </> ) } export default Home;
×
×
  • Create New...