Merge pull request #41 from skellock/enter-animations

Adds an entrance animation component for nicer startup.

Author: skellock

src/main/main-window/main-window.ts

@@ -33,6 +33,10 @@ export function createMainWindow(appPath: string) {
     autoHideMenuBar: true,
     backgroundColor: '#fff',
     title: app.getName(),
+    webPreferences: {
+      backgroundThrottling: false,
+      textAreasAreResizable: false,
+    },
   })
 
   // maximize if we did before

src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx

@@ -8,6 +8,7 @@ import {
   styles,
   cssProps,
   commandOrControlKey,
+  EnterAnimation,
 } from '../../../platform'
 import { css, compose } from 'glamor'
 
@@ -22,8 +23,10 @@ const KEY_1 = `${commandOrControlKey}+1`
 const KEY_2 = `${commandOrControlKey}+2`
 const KEY_3 = `${commandOrControlKey}+3`
 
-const ROOT = compose(
-  styles.windowDrag,
+// an extra layer just for the drag style due to electron bug
+const ROOT = styles.windowDrag
+
+const BAR = compose(
   styles.row,
   cssProps({
     paddingLeft: spacing.medium,
@@ -57,11 +60,16 @@ export class SampleTabs extends React.PureComponent<SampleTabsProps, {}> {
 
   render() {
     const { tab } = this.props
+
     return (
       <div {...css(ROOT)}>
-        <Tab onClick={this.changeTab1} active={tab === 'one'} text='doggo' />
-        <Tab onClick={this.changeTab2} active={tab === 'two'} text='paragraphs' />
-        <Tab onClick={this.changeTab3} active={tab === 'three'} text='empty' />
+        <EnterAnimation animation='slide' delay={100} y={-60}>
+          <div {...BAR}>
+            <Tab onClick={this.changeTab1} active={tab === 'one'} text='doggo' />
+            <Tab onClick={this.changeTab2} active={tab === 'two'} text='paragraphs' />
+            <Tab onClick={this.changeTab3} active={tab === 'three'} text='empty' />
+          </div>
+        </EnterAnimation>
       </div>
     )
   }

src/renderer/platform/components/enter-animation/enter-animation.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cssProps } from '../..'
+import { css } from 'glamor'
+
+interface EnterAnimationState {
+  mounted?: boolean
+}
+
+export interface EnterAnimationProps {
+  children?: React.ReactNode
+  /** the type of animation */
+  animation: 'grow' | 'slide'
+  /** how long to wait in milliseconds before starting */
+  delay?: number
+  /** how fast to complete the animation in milliseconds */
+  speed?: number
+  /** how far vertically to slide */
+  y?: number
+}
+
+const DEFAULT_SPEED = 250
+const DEFAULT_DELAY = 0
+
+const SCALE_FROM = `scale(0.01, 0.01)`
+
+const FINISH = cssProps({ transform: `translate(0, 0) scale(1, 1)` })
+
+export class EnterAnimation extends React.PureComponent<EnterAnimationProps, EnterAnimationState> {
+  state: EnterAnimationState = {}
+
+  componentDidMount() {
+    setTimeout(() => this.setState({ mounted: true }), 1)
+  }
+
+  render() {
+    // values
+    const { mounted } = this.state
+    const { speed = DEFAULT_SPEED, delay = DEFAULT_DELAY, animation, y = 0 } = this.props
+
+    // css properties
+    let transform: string
+
+    switch (animation) {
+      case 'slide':
+        transform = `translate(0, ${y}px)`
+        break
+
+      // grow
+      default:
+        transform = SCALE_FROM
+        break
+    }
+
+    const transition = `transform ${speed || DEFAULT_SPEED}ms ${delay || DEFAULT_DELAY}ms`
+
+    // style props
+    const starting = css(cssProps({ transform, transition }))
+    const finishing = css(mounted && FINISH)
+
+    return (
+      <div {...starting} {...finishing}>
+        {this.props.children}
+      </div>
+    )
+  }
+}

src/renderer/platform/components/enter-animation/index.ts

@@ -0,0 +1 @@
+export * from './enter-animation'

src/renderer/platform/components/index.ts

@@ -2,3 +2,4 @@ export * from './text'
 export * from './scrollable-content'
 export * from './centered-content'
 export * from './tab'
+export * from './enter-animation'

src/renderer/platform/components/tab/tab.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CSSProperties } from 'react'
-import { colors, spacing, fontSizes, Text, styles, cssProps } from '../..'
+import { colors, spacing, fontSizes, Text, styles, cssProps, EnterAnimation } from '../..'
 import { css, compose } from 'glamor'
 
 export interface TabProps {
@@ -39,8 +39,10 @@ export function Tab(props: TabProps) {
   const textStyle = css(BASE_TEXT, props.active && ACTIVE_TEXT)
 
   return (
-    <div {...styleProps} onClick={props.onClick}>
-      <Text style={textStyle} text={props.text} />
-    </div>
+    <EnterAnimation animation='grow' speed={100} delay={400}>
+      <div {...styleProps} onClick={props.onClick}>
+        <Text style={textStyle} text={props.text} />
+      </div>
+    </EnterAnimation>
   )
 }