​​React Challenge Webinar 3.1: Scroll Parallax

​​Webinar video

​​Links

  • ​​
​​Scroll Parallax
  • ​​
​​Starter  
  • ​​Padlock animation

​​Assignments

​​Requirements
  • ​​Make a prototype that has scroll parallax effect, using one or more of useTransform​, useSticky​, useSpeed​ and useTrigger​.
  • ​​As an example, you can make the iPhone XR page like this (but feel free to use whatever design you’d like!).
​​
 
Dropbox file iconassignment-3.1.1-iphonexr
​​
​​Hints
  • ​​Follow along with my webinar to understand how to use the input/output ranges of useTransform​ to make different effects
  • ​​Start with a very simple project first to test out useSticky​, useSpeed​ and useTrigger​, such as this sandbox. Make sure to understand the parameters of each function.
​​
​​Solution
​​
 
summer-iphonexr-parallax - CodeSandbox
The online code editor tailored for web applications
summer-iphonexr-parallax - CodeSandbox •
​​
​​

​​useParallax.js​ References

​​Functions usePositiveOffset​, useSticky​, useSpeed​ and useTrigger​ are custom hook that I wrote to make it easier to create common parallax effect such as sticky headers.

​​usePositiveOffset​

​​Description
​​Convert a negative offset MotionValue​, that comes with contentOffsetX​  and contentOffsetY​ props of Scroll​, to a positive one.
​​
​​Usage
​​// ==> 1. import it
​​import { usePositiveOffset } from "./useParallax"
​​...
​​function App() {
​​  // ==> 2. call usePositiveOffset in a function component
​​  const positiveOffset = usePositiveOffset(offset)
​​  ...
​​}
​​

​​useSticky​

​​Description
​​Returns a MotionValue​ which can be used to make an item sticky when the Scroll​ is scrolled into specific ranges.
​​
​​Usage
​​// ==> 1. import it
​​import { useSticky } from "./useParallax"
​​...
​​
​​function App() {