Skip to content

Instantly share code, notes, and snippets.

@dbismut
Last active April 9, 2018 22:01
Show Gist options
  • Save dbismut/e3bf15a45b025ad99387dd9c41409746 to your computer and use it in GitHub Desktop.
Save dbismut/e3bf15a45b025ad99387dd9c41409746 to your computer and use it in GitHub Desktop.
Part 3 - Scales the post node in render according to dragProgress
render() {
/* same code */
const { dragProgress } = this.state;
const postStyle =
dragProgress > 0
? {
transform: `scale(${1 - dragProgress * (1 - DRAG_MINIMUM_SCALE)})`,
borderRadius: dragProgress * 16
}
: null;
// we need to set the style to null otherwise transform: scale(0)
// will make the close icon lose its fixed positioning and scroll
// with the post.
// read https://stackoverflow.com/a/42660333 for more info
return (
<CSSTransition /* ...props */ />
<div className="page full-width page-post">
<div
ref={post => (this.post = post)}
className="post full-width"
style={postStyle}
>
/* same code */
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment