V3

[jscottsmith]

⚠️ V3 is out! ⚠️

yarn add react-scroll-parallax

If you encounter issues or bugs throw a comment in this thread.

V3

This is to address some long standing enhancement requests and to improve/modernize the code base so that I and others are more willing to contribute once again.

Documentation and demos (WIP):

1. V3 Docs
2. V3 Demo Site
3. V3 Storybook
4. V2 Migration Guide

Goals

• Better documentation and examples
  • [Support] Examples are too complex #121
  • ParallaxBanner > When scroll position at top, transform doesn't start from 0  #122
  • [TypeScript] I don't really understand how I implement this. #96
• Address long standing requests for new features like applying other transforms
  • Feature request: other transforms based on scroll progress #89
  • ParallaxBanner left to right #85
  • Feature request: Disable when aligned/reaches scroll point #113
• Simplify basic usage (add speed prop)
• Refactor everything to TypeScript
• Separate core (non React) functionality to a new package/dependency (parallax-controller)

Component Changes

1. x and y props become translateX and translateY
2. Add rotate transforms: rotateX, rotateY, rotateZ
   • https://react-scroll-parallax-v3.surge.sh/?path=/story/parallax-new-transforms--with-rotation
3. Add scale transforms: scaleX, scaleY, scaleZ
   • https://react-scroll-parallax-v3.surge.sh/?path=/story/parallax-scale--with-scale
4. Add opacity prop
   • https://react-scroll-parallax-v3.surge.sh/?path=/story/parallax-opacity--with-opacity
5. Add speed prop. Example: <Parallax speed={-1} />
   • https://react-scroll-parallax-v3.surge.sh/?path=/story/parallax-speed--with-speed&args=speed:-5
6. Add easing functions - non linear effect transitions
   • https://react-scroll-parallax-v3.surge.sh/?path=/story/parallax-easing--with-easing&args=easing:easeInCubic
7. Add rootMargin to apply as element boundary that determine start/ending transitions and when an element enters/leaves the viewport
8. Add callbacks for events: onProgressChange, onEnter, onExit
9. Add shouldAlwaysCompleteAnimation option to solve ParallaxBanner > When scroll position at top, transform doesn't start from 0  #122
10. Add startScroll and endScroll options to set scroll top/left bounds manually.

New Hook

Add useParallax hook to setup an element.

const Component = () => {
  const { ref } = useParallax({ translateY: [100, -100] });
  return (
    <div ref={ref}>
      <div />
    </div>
  );
};

Possible Updates/Considerations

1. Expose internal value of percentMoved via callback for custom transforms (onProgressChange)
2. Use CSS variables to apply transforms
3. Handle cases where scroll is at top but element starts in the view. Requires an optional way to set start position. (shouldAlwaysCompleteAnimation)
4. Add a targetElement to use as the scroll progress
5. Allow setting scroll bounds manually via startScroll and endScroll values, instead of relying on the elements position for progress updates.

TODOs

• Publish an alpha to start testing react-scroll-parallax@alpha
• Publish new storybook https://react-scroll-parallax-v3.surge.sh/

Please feel free to add comments and requests to this issue.

[yang]

Just wanted to say these are awesome changes! It would be super fun to demo the new alpha in Plasmic (the old version was in use on https://code-components.plasmic.site/).

The simplified basic usage is going to make this much more approachable to designers.

[jscottsmith]

@yang Oh wow, thanks, that's good motivation! An updated feature would be nice -- may just want to wait until it's at least beta just in case.

Simplifying the API and better docs is the key to making this more accessible. If you have ideas LMK, otherwise just look for updates here as I go.

[sohcfst]

just wanted to chime in and say thanks for your work with this!!

[jscottsmith]

@sohcfst cheers, thanks!