coleturner

import PropTypes from 'prop-types';
import React from 'react';
import imagesLoaded from 'imagesloaded';
import Isotope from 'isotope';
import classNames from 'classnames';

export default class IsotopeContainer extends React.PureComponent {
  static propTypes = {
    children: PropTypes.node.isRequired,
    itemSelector: PropTypes.string.isRequired,

coleturner

http://jsfiddle.net/ryh2k4xv/

coleturner

Context

I ran into an issue where my component was not updating when trying to use framer-motion for a parallax effect. After debugging framer-motion, I found that it was not updating the scrollYProgress value because "maxYOffset" was set to 0. This special parameter is derived by framer-motion, using the following calculation:

document.body.clientHeight - window.innerHeight

Weird, I thought. My document is definitely scrolling. When I checked document.body.scrollHeight, it looked fine. But why was document.body.clientHeight less than document.body.scrollHeight, especially if scrolling is what I care about?

coleturner

Demo

Context

useViewportScroll is a great way to create a parallax effect as the page scrolls. In some cases however, we only want to scroll when an element is in the viewport area.

So for example, if we have a "landscape" scene, and want to animate the Sun object only when it's in view, we start with our useViewportScroll implementation:

function Sun(props) {
 const { scrollY, scrollYProgress } = useViewportScroll();

coleturner

TIL, that Safari will render your text as empty when using Flexbox as a child.

Take the following HTML:

<div class="parent">
   <div class="child">Gradient color text!</div>
</div>