Theo's Typesafe Cult•3y ago

Weird Question For People Who Have Some Experience With React Spring

I am working on a app where I am trying to add a parallax effect to the landing page. I am running into a bug however where there is a large gap between parallax layers where the speed is > 0 and the offset is 1. I am able to sort of get around this by setting the offset to almost 1 (eg: 0.99999) but this still leads to a bug where there is a large gap at the bottom of the page. Here is a piece of code that leads to the issue where there is a large gap between the blue and red layer:

import type { NextPage } from 'next';
import Image from 'next/image';
import { Parallax, ParallaxLayer } from '@react-spring/parallax';

const Home: NextPage = () => {
    return (
        <Parallax pages={2} style={{ top: '0', left: '0' }} className="overflow-hidden">
            <ParallaxLayer className="bg-blue-500" offset={0} speed={1}>
                <p>Parallax</p>
            </ParallaxLayer>
            <ParallaxLayer className="bg-red-500" offset={1} speed={1}>
                <p>Parallax</p>
            </ParallaxLayer>
        </Parallax>
    );
};

export default Home;

import type { NextPage } from 'next';
import Image from 'next/image';
import { Parallax, ParallaxLayer } from '@react-spring/parallax';

const Home: NextPage = () => {
    return (
        <Parallax pages={2} style={{ top: '0', left: '0' }} className="overflow-hidden">
            <ParallaxLayer className="bg-blue-500" offset={0} speed={1}>
                <p>Parallax</p>
            </ParallaxLayer>
            <ParallaxLayer className="bg-red-500" offset={1} speed={1}>
                <p>Parallax</p>
            </ParallaxLayer>
        </Parallax>
    );
};

export default Home;

I belive it might be related to this github issue: https://github.com/pmndrs/react-spring/issues/962 Thanks in advance to anyone who is able to help! Been trying to take a crack at this for hours to no avail.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Weird Question For People Who Have Some Experience With React Spring