Hard to find next.js reference for scroll sequence.

jjy9331 commented 1 year ago

References I've been looking for

jjy331 commented 1 year ago

Solution

Change Interactive animation design
It can be developed in a component format, so think about it while making it possible first.

jjy9331 commented 1 year ago

GPT answered

npm install react-scroll

import { useEffect, useState } from 'react';
import { Element, scroller } from 'react-scroll';

const ScrollAnimation = () => {
  const [currentFrame, setCurrentFrame] = useState(1);

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      // Write the logic to change the frame based on the scroll position.
      const frame = Math.ceil(scrollPosition / 100); // For example, change frame every 100px.

      setCurrentFrame(frame);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToNext = () => {
    scroller.scrollTo('next', {
      duration: 800,
      delay: 0,
      smooth: 'easeInOutQuart',
    });
  };

  return (
    <div>
      <Element name="next" className="next-section">
        <h2>Next Section</h2>
      </Element>
      <div className="scroll-animation">
        <img src={`/frames/frame${currentFrame}.png`} alt="Animation Frame" />
      </div>
      <button onClick={scrollToNext}>Scroll to Next</button>
    </div>
  );
};

export default ScrollAnimation;

In this example, we utilize the useState hook to manage the current frame as a state variable and the useEffect hook to handle the scroll event. Whenever a scroll event occurs, we calculate the scroll position and update the current frame based on the provided logic. In this case, the frame changes every 100 pixels.

Additionally, we employ the scroller.scrollTo function from the react-scroll library to enable scrolling to the next section when the button is clicked. The Element component is used to define a reference point for the scroll position.

Assuming the animation frames are stored as files in the /frames directory, such as frame1.png, frame2.png, frame3.png, you will need to adjust the actual file paths for the animation frames accordingly.

jjy9331 commented 1 year ago

What to improve

img loading webworker & async change from img to canvas

https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3

jjy9331 commented 1 year ago

Issues with sequence animation image cropping

Design images as objects pass across the screen

markup & style easy
After creating a sequence image by fixing the position of an object, controlling it to pass on the screen

Reduced image loading cost & rendering cost for position movement

jjy9331 commented 1 year ago

A comparison of the performance of the two situations is required.

jjy9331 / pfjjy_nextjs

Hard to find next.js reference for scroll sequence. #4