Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About talkingSkunk

  • Rank
  1. This was the original error that I received, if I put new Image(). Help?
  2. 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") {
  3. 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"&
  4. I tried the second code, and it worked. Thank you!
  5. 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_c
  6. 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.
  7. 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, initi
  8. 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/Ho