Chapter 1.1: Setting Up Parallax Scrolling

The Parallax component allows us to establish a scrollable container. Within this container, we can utilize the ParallaxLayer component to enable react-spring to manage the movement of elements effectively.

Here's a sample implementation:

import React from "react";

import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

export default function App() {

return (

<div>

<Parallax pages={2} scrolling={false} horizontal ref={(ref) => (this.parallax = ref)}>

<ParallaxLayer

offset={0}

speed={0.1}

onClick={() => this.parallax.scrollTo(1)}

style={{

display: "flex",

alignItems: "center",

justifyContent: "center"

}}

>

<img

style={{ width: "20%" }}

/>

</ParallaxLayer>

<ParallaxLayer

offset={1}

speed={0.1}

onClick={() => this.parallax.scrollTo(0)}

style={{

display: "flex",

alignItems: "center",

justifyContent: "center"

}}

>

<img

style={{ width: "40%" }}

/>

</ParallaxLayer>

</Parallax>

</div>

);

}

When a user clicks on an image, the this.parallax.scrollTo function will be invoked, guiding the user to the specified offset.

Chapter 1.2: Optimizing Performance

To enhance performance, we can implement several optimizations. For instance, adding the native flag can significantly boost animation performance, especially for complex animations.

Here’s an example showcasing its usage:

import React from "react";

import { Spring, animated } from "react-spring/renderprops";

export default function App() {

return (

<div>

<Spring native from={{ opacity: 0 }} to={{ opacity: 1 }}>

{(props) => <animated.div style={props}>hello</animated.div>}

</Spring>

</div>

);

}

This native property can also be applied for animations involving text:

import React from "react";

import { Spring, animated } from "react-spring/renderprops";

export default function App() {

return (

<div>

<Spring native from={{ number: 0 }} to={{ number: 1 }}>

{(props) => <animated.div>{props.number}</animated.div>}

</Spring>

</div>

);

}

Additionally, this can be utilized in scrolling animations:

import React from "react";

import { Spring, animated } from "react-spring/renderprops";

export default function App() {

return (

<div>

<Spring native from={{ scroll: 0 }} to={{ scroll: 250 }}>

{(props) => (

<animated.div

scrollTop={props.scroll}

style={{ overflowY: "scroll", height: 300 }}

>

{Array(100).fill().map((_, i) => (

<p key={i}>{i}</p>

))}

</animated.div>

)}

</Spring>

</div>

);

}

We can also combine this technique with Trail and Transition components to enrich our animations.

Chapter 1.3: Utilizing Interpolation

The native property can be paired with interpolation to refine animations further. Here’s an example:

import React from "react";

import { Spring, animated, interpolate } from "react-spring/renderprops";

export default function App() {

return (

<div>

<Spring

native

from={{ o: 0, xyz: [0, 0, 0], color: "red" }}

to={{ o: 1, xyz: [10, 20, 5], color: "green" }}

>

{({ o, xyz, color }) => (

<animated.div

style={{

color,

background: o.interpolate((o) => rgba(210, 57, 77, ${o})),

transform: xyz.interpolate(

(x, y, z) => translate3d(${x}px, ${y}px, ${z}px)

),

border: interpolate(

[o, color],

(o, c) => ${o * 10}px solid ${c}

),

padding: o.interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] })

.interpolate((o) => ${o}%),

opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])

}}

>

{o.interpolate((n) => n.toFixed(2))}

</animated.div>

)}

</Spring>

</div>

);

}

This example demonstrates how to leverage the interpolate function to create dynamic styles for animations while optimizing performance with the native prop.