dbismut

render() {
  /* ... */
  const { closeInverted, dragProgress } = this.state; // change the state
  
  return (
    /* same code */
    
    // this will add the invert class
    // when this.state.closeInverted is true
    <div

dbismut

state = {
  dragProgress: 0,
  closeInverted: false,
};

onScroll = () => {
  /* same code */
  
  // handling close icon color
  const threshold = scrollTop / CLOSE_INVERTED_THRESHOLD;

dbismut

.close.invert {
  background: #000;
  &::after,
  &::before {
    background: #fff;
  }
}

dbismut

executeEnteringTransition = (node, done) => {
  /* same code */
  
  const {
    height: heightFrom,
    top: topFrom,
    scale: scaleFrom,
    ...mainFrom
  } = this.from;
  const { height: heightTo, top: topTo, scale: scaleTo, ...mainTo } = this.to;

dbismut

getPreviewStyleAndPosition = () => {
  const { top, width, height } = this.preview.getBoundingClientRect();

  const transformMatrix = window.getComputedStyle(this.preview).transform;
  // transformMatrix is either 'none', or a string in the form of
  // matrix(0.965, 0, 0, 0.965, 0, 0)

  const scale =
    transformMatrix.indexOf('matrix') === 0
      ? parseFloat(transformMatrix.split(', ')[3])

dbismut

import React, { PureComponent } from 'react';
import Pressure from 'pressure';

const PRESSED_SCALE = 0.95;
// minimum scale applied to the preview node

export default class Preview extends PureComponent {
  state = { force: 0 };

  timer = null;

dbismut

.page-post {
  &.post-exit,
  &.post-enter {
    .content,
    .close,
    .underlay {
      opacity: 0;
    }
    .underlay {
      transition-delay: 0;

dbismut

executeEnteringTransition = (node, done) => {
  this.postStyler.set({ ...this.from, visibility: 'visible' });
  node.classList.add('post-enter-started'); // add this line
  
  /* same code */
  
 complete: () => {
    node.classList.remove('post-enter-started'); // add this line
    done();
  }

dbismut

/* other imports */

import browser from 'bowser'; // the browser import

/* ... */

executeEnteringTransition = (node, done) => {
  this.postStyler.set({ ...this.from, visibility: 'visible' });

  const hidePreview = () => (this.preview.style.visibility = 'hidden');

dbismut

.page-post .underlay {
  position: fixed;
  top: -10vh;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 120vh;
  background-color: #fff;
  transition: opacity 400ms ease;
  &::before {