如何在react-spring Parallax中实现滚动时从中心放大门图片宽度？

Hey there! I’ve dug into your problem and have a react-spring-native solution that’ll create that perfect "walking through the door" effect you’re after. Let’s break this down step by step:

We’ll track the user’s scroll position, then use react-spring to map that scroll distance to two key animations on your porch layer:

1. Horizontal scaling from the center: The porch will stretch outward left and right until it’s completely off-screen
2. Fading opacity: To smooth the transition as the porch disappears, we’ll fade it out in sync with the scaling

This avoids the "scrolling up" look and leans into react-spring’s strengths for smooth, performant animations.

1. Track Scroll Position #

First, set up a state variable to capture how far the user has scrolled, and attach a scroll listener to update it:

import { useState, useEffect } from 'react';
import { useSpring, animated } from 'react-spring';

function App() {
  // Track current scroll distance from top
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    // Clean up listener on unmount
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

2. Map Scroll to React-Spring Animations #

Next, use useSpring to convert the scroll value into animation properties. We’ll define a scroll threshold (how far the user needs to scroll to complete the effect) and map scroll progress to our scale/opacity values:

// Adjust this value to control how far the user needs to scroll for the full effect
  const SCROLL_THRESHOLD = 600;

  // Calculate animation progress (0 to 1) based on scroll position
  const scrollProgress = Math.min(scrollY / SCROLL_THRESHOLD, 1);

  // Configure react-spring animations
  const porchAnimation = useSpring({
    // Scale horizontally from 1 to a value large enough to push porch off-screen
    scaleX: 1 + (scrollProgress * 4),
    // Fade out as we scroll
    opacity: 1 - scrollProgress,
    // Ensure scaling originates from the center of the element
    transformOrigin: "center",
    // Tweak tension/friction for smoother animation feel
    config: { tension: 180, friction: 25 }
  });

3. Apply Animations to Your Porch Layer #

Wrap your porch layer in an animated.div (from react-spring) and attach the animation properties:

return (
    <div className="app-container">
      {/* Room layer - fixed in background */}
      <div className="fixed-layer room">
        <img src="/path-to-your-room-image.png" alt="Room interior" />
      </div>

      {/* Porch layer - animated with react-spring */}
      <animated.div className="fixed-layer porch" style={porchAnimation}>
        <img src="/path-to-your-porch-image.png" alt="Porch with door cutout" />
      </animated.div>

      {/* Placeholder content to make the page scrollable */}
      <div className="scroll-spacer"></div>
    </div>
  );
}

4. Add CSS for Proper Layout #

Make sure both layers are fixed in place (so they don’t scroll with the page) and the page has enough content to let users scroll:

.app-container {
  min-height: 200vh; /* Ensure page is long enough to scroll */
  position: relative;
}

.fixed-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.room {
  z-index: 1; /* Place room behind porch */
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.porch {
  z-index: 2; /* Place porch on top */
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.scroll-spacer {
  height: 100vh; /* Adds extra scrollable space */
}

• Adjust SCROLL_THRESHOLD: Make this larger if you want the effect to take longer (more scrolling) to complete, or smaller for a faster transition
• Tweak scaleX multiplier: If your porch isn’t fully disappearing, increase the 4 in 1 + (scrollProgress * 4) to a higher number (like 5 or 6)
• Play with spring config: The tension and friction values control how "bouncy" the animation is. Lower tension = slower, smoother movement; higher friction = less overshoot

This solution is fully compatible with react-spring’s ecosystem, so you can easily extend it with more parallax effects later on.

内容的提问来源于stack exchange，提问作者Megan Byers