long-form.jsx

// A pseudocode proposal setup for facilitating animation effects on scroll depth for longform article
// sample effect: https://readymag.com/u59457328/681360/
//
// Utilizes the ScrollMonitor from Self:
// https://github.com/CondeNast/autopilot-self/blob/master/src/app/views/components/ScrollMonitor.js

class LongformPage extends React.Component {
  render() {
    return (
      <BasePage>
        <LongformArticle article={this.props.article} />
      </BasePage>
    );
  }
}


class LongformArticle extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isScrolledPastHero: false
    };
    
    this._handleScrollPastHero = this._handleScrollPastHero.bind(this);
    this._handleScrollToHero = this._handleScrollToHero.bind(this);
  }
  
  _handleScrollPastHero(event) {
    event.preventDefault(); // IDK if this is needed
    this.setState({
      isScrolledPastHero: true
    });
  }
  
  _handleScrollToHero(event) {
    event.preventDefault(); // IDK if this is needed
    this.setState({
      isScrolledPastHero: false
    });
  }
  
  render () {
    // LongformArticleBody component accepts a boolean prop for `isScrolledTo` (or whatever)
    // It internally adds a corresponding classname to its top-level component
    // We wrap the Hero in ScrollMonitor to trigger state change when it has exited viewport
    // We transition background & text color on the classname
    return [
      <ScrollMonitor onExitViewport={this._handleScrollPastHero} onEnterViewport={this._handleScrollToHero}>
        <Hero {...this.props.article.hero} />
      </ScrollMonitor>
      <LongformArticleBody isScrolledTo={this.state.isScrolledPastHero} />
    ];
  }
  
}