Recreating scroll, image/text animation, and fade-ins using Next.js and TypeScript

Question

Recreating scroll, image/text animation, and fade-ins using Next.js and TypeScript

I'm currently in the process of replicating a demo template found at using scroll effects and mouse location tracking within nextjs/typescript.

While troubleshooting, I encountered an issue with horizontal scrolling that can be resolved by adding overflow:hidden to the section tags - however, this breaks any sticky content interactions.

Unfortunately, I haven't come across any examples on how to accurately recreate these actions, and I'm unsure about the process of manipulating styles/dom to achieve the effect correctly.

I've started developing a function to manipulate these elements, but I'm uncertain about how to bind it and animate it effectively based on mouse events.

Upon loading, there is a title animation where the text enlarges, shrinks, and then returns to its original size https://i.sstatic.net/6Hndg4yB.png

The side rings are rotating https://i.sstatic.net/rE1dV3hk.png https://i.sstatic.net/cw8J8qPg.png

// Hero Section
const Hero = () => {
  React.useEffect(() => {
    var ellipseLeft = document.querySelector(".ellipse-left");
    var ellipseRight = document.querySelector(".ellipse-right");

    var rotateZ = 23;

    setInterval(() => {
      rotateZ++;

      ellipseRight.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseRight.style["transform-style"] = "preserve-3d";
      ellipseRight.style["will-change"] = "transform";

      ellipseLeft.style.transform =
        "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(" +
        rotateZ +
        "deg) skew(0deg, 0deg)";
      ellipseLeft.style["transform-style"] = "preserve-3d";
      ellipseLeft.style["will-change"] = "transform";
    }, 50);
  }, []);

During scrolling, the phone unlocks and text moves using parallax https://i.sstatic.net/QvxkmOnZ.png

Check out the project on: https://codesandbox.io/p/sandbox/fervent-fast-forked-wcsmh4

As elements are revealed for the first time, they fade in smoothly https://i.sstatic.net/F55YDgVo.png

Additionally, there is a contrast transition from light to dark within this section which changes based on scroll direction and speed https://i.sstatic.net/BH5NWT2z.png

javascript typescript next.js

Answer 1

Answer №1

To achieve scroll effects, image/text animation, and fade-ins in a Next.js project with TypeScript, consider using libraries like framer-motion for animations and react-intersection-observer for scroll-based animations.

Here is a simple example illustrating how you can organize your components to create similar effects:

jsx

import { useEffect, useRef } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

const HeroSection = () => {
    const controls = useAnimation();
    const [ref, inView] = useInView();
    const titleRef = useRef(null);

    useEffect(() => {
        if (inView) {
            controls.start('visible');
        }
    }, [controls, inView]);

    useEffect(() => {
        if (titleRef.current) {
            const titleTimeline = controls
                .sequence()
                .add({ scale: 1.2, transition: { duration: 0.5 } })
                .add({ scale: 1, transition: { duration: 0.5 } });

            titleTimeline.start();
        }
    }, [controls]);

    return (
        <section className="hero" ref={ref}>
            <motion.div
                className="title"
                ref={titleRef}
                initial={{ scale: 0 }}
                animate={controls}
            >
                Your Title Here
            </motion.div>
            {/* Additional content and animations */}
        </section>
    );
};

export default HeroSection;

Explanation:

We utilize react-intersection-observer to detect when the component enters the view. Once the component is in view, we trigger the animation sequence defined by framer-motion controls. For the title animation, we use a useRef hook to target the title element and animate it upon entering the view. You can incorporate more animations and effects using framer-motion controls and hooks. Ensure to install framer-motion and react-intersection-observer:

bash

npm install framer-motion
npm install react-intersection-observer

Remember to import these dependencies at the beginning of your file:

jsx

import { useEffect, useRef } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

This code offers a foundational framework for incorporating scroll-based animations and fade-ins in a Next.js TypeScript project. Customize and expand upon this structure to suit your specific animation requirements.

Answer 2

To achieve scroll effects, image/text animation, and fade-ins in a Next.js project with TypeScript, consider using libraries like framer-motion for animations and react-intersection-observer for scroll-based animations.

Here is a simple example illustrating how you can organize your components to create similar effects:

jsx

import { useEffect, useRef } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

const HeroSection = () => {
    const controls = useAnimation();
    const [ref, inView] = useInView();
    const titleRef = useRef(null);

    useEffect(() => {
        if (inView) {
            controls.start('visible');
        }
    }, [controls, inView]);

    useEffect(() => {
        if (titleRef.current) {
            const titleTimeline = controls
                .sequence()
                .add({ scale: 1.2, transition: { duration: 0.5 } })
                .add({ scale: 1, transition: { duration: 0.5 } });

            titleTimeline.start();
        }
    }, [controls]);

    return (
        <section className="hero" ref={ref}>
            <motion.div
                className="title"
                ref={titleRef}
                initial={{ scale: 0 }}
                animate={controls}
            >
                Your Title Here
            </motion.div>
            {/* Additional content and animations */}
        </section>
    );
};

export default HeroSection;

Explanation:

We utilize react-intersection-observer to detect when the component enters the view. Once the component is in view, we trigger the animation sequence defined by framer-motion controls. For the title animation, we use a useRef hook to target the title element and animate it upon entering the view. You can incorporate more animations and effects using framer-motion controls and hooks. Ensure to install framer-motion and react-intersection-observer:

bash

npm install framer-motion
npm install react-intersection-observer

Remember to import these dependencies at the beginning of your file:

jsx

import { useEffect, useRef } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

This code offers a foundational framework for incorporating scroll-based animations and fade-ins in a Next.js TypeScript project. Customize and expand upon this structure to suit your specific animation requirements.

Recreating scroll, image/text animation, and fade-ins using Next.js and TypeScript

Answer №1

Similar questions

Does manually changing the "dirty" setting of a field affect the CSS classes in AngularJS?

The Jquery datepicker can display the day prior to the selected date

updating page in angular2 based on location.hash

Vue.js is having trouble locating images

Is there a way to capture a word from a webpage with just a double click as an input?

Strange behavior observed in the Datepicker, possibly linked to the blur event

Creating a countdown timer for an ASP.NET web application using C#

How can I use query to swap out elements within a div when clicked?

Clicking on a Vuetify v-btn with the :href attribute set to download will open the XML file

Selecting an entire row in a Kendo grid

Unable to assign the 'id' property within Datatable

Managing authentication tokens in next.js

Looking for a JavaScript function that will enable the acceptance of commas and spaces

Is there a way to carry out tests on keydown events within Jasmine by specifying the keyCode within an Angular2+

Transforming NIF to OBJ within the Blender 249.2 software results in an object that is not visible

Node.js with ejs supports the inclusion of partials, but sometimes struggles to locate the variable that has been defined in the partial file

ReactHtmlParser function is returning an object that is classified as [object Object]

Upon transitioning from Angular 5 to Angular 6, a noticeable issue arises: The existing document lacks a required doctype

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

How can I find the last element that was selected using XPath in the browser console