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 {

dbismut

/* ... */

<div
  className={cn('page full-width page-post', {
    'post-dragged': dragProgress > 0
  })}
>
  <div className="underlay" />
  <div
    ref={post => (this.post = post)}

dbismut

onScroll = () => {
  const scrollTop = windowScroll.get('top');

  if (scrollTop < 0 && !this.isTransitioningFromDrag) {
    if (this.isTouching) this.isDragging = true;
    if (this.isDragging) {
      if (scrollTop > -DRAG_THRESHOLD) {
        const dragProgress = Math.min(1, -scrollTop / DRAG_LIMIT);
        this.setState({ dragProgress });
      } else {

dbismut

addListeners = () => {
  window.addEventListener('scroll', this.onScroll);
  window.addEventListener('touchstart', this.onTouchStart);
  window.addEventListener('touchend', this.onTouchEnd);
};

removeListeners = () => {
  window.removeEventListener('scroll', this.onScroll);
  window.removeEventListener('touchend', this.onTouchEnd);
  window.removeEventListener('touchstart', this.onTouchStart);

dbismut

executeEnteringTransition = (node, done) => {
  /* same code */
    complete: () => {
      tween({ from: windowScroll.get('top'), to: 0 }).start({
        update: v => windowScroll.set('top', v),
        complete: () => {
          // this removes all style from the post node
          // and fixes the close icon position bug
          // https://stackoverflow.com/questions/42660332/css-transform-parent-and-fixed-child-is-there-a-way-to-breakout-of-node-with-tr
          

dbismut

<div className={cn('page full-width page-post', { 'post-dragged': dragProgress > 0 })}>

dbismut

onExit = () => {
  this.removeListeners();
  if (!this.preview) return;

  const scale = 1 - this.state.dragProgress * (1 - DRAG_MINIMUM_SCALE);

  this.from = {
    top: 0,
    height: this.post.offsetHeight,
    width: this.post.offsetWidth,

dbismut

// .post-dragged rule is exactly the same
// as .post-enter
.page-post {
  &.post-enter,
  &.post-dragged { // add this rule
    .post {
      position: fixed;
      overflow: hidden;
      pointer-events: none;
    }

dbismut

render() {
  /* same code */
  
  const { dragProgress } = this.state;

  const postStyle =
    dragProgress > 0
      ? {
          transform: `scale(${1 - dragProgress * (1 - DRAG_MINIMUM_SCALE)})`,
          borderRadius: dragProgress * 16