diff --git a/package.json b/package.json
index 20b9d6ab..dc0051a9 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
"react-router-dom": "^4.2.2",
"react-router-redux": "5.0.0-alpha.9",
"react-smooth-scrollbar": "^8.0.6",
+ "react-spring": "^4.2.1",
"redux": "^4.0.0",
"redux-actions": "^2.3.0",
"redux-thunk": "^2.2.0",
diff --git a/src/components/base/FlipTicker/index.js b/src/components/base/FlipTicker/index.js
index 6d14ca87..e6d9b271 100644
--- a/src/components/base/FlipTicker/index.js
+++ b/src/components/base/FlipTicker/index.js
@@ -5,7 +5,7 @@
import React, { PureComponent, Fragment } from 'react'
import styled from 'styled-components'
-import { Motion, spring } from 'react-motion'
+import { Spring, animated } from 'react-spring'
import Box from 'components/base/Box'
@@ -17,22 +17,10 @@ const Container = styled(Box).attrs({
white-space: pre;
`
-const TickWrapper = styled(Box).attrs({
- style: p => ({
- transform: `translate3d(0, -${p.offset}px, 0)`,
- }),
-})`
- top: 0;
- position: absolute;
-`
-
const RANGE_NUMBER = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
const RANGE_COMPONENT = RANGE_NUMBER.map((r, i) => {r})
-const SPRINT_CONFIG = {
- stiffness: 280,
- damping: 23,
-}
+const SPRINT_CONFIG = { tension: 130, friction: 12 }
type Props = {
value: string,
@@ -96,14 +84,28 @@ function Tick(props: { height: number, value: string }) {
const index = RANGE_NUMBER.indexOf(value)
const offset = height * index
+ const Content = {RANGE_COMPONENT}
+
return (
-
- {m => {RANGE_COMPONENT}}
-
+ {m => (
+ `translate3d(0, -${v}px, 0)`),
+ top: 0,
+ position: 'absolute',
+ }}
+ >
+ {Content}
+
+ )}
+
)
}
diff --git a/yarn.lock b/yarn.lock
index 3c9de45b..27bccbb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -869,6 +869,13 @@
"@babel/plugin-syntax-dynamic-import" "7.0.0-beta.42"
"@babel/plugin-syntax-import-meta" "7.0.0-beta.42"
+"@babel/runtime@^7.0.0-beta.44":
+ version "7.0.0-beta.44"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.44.tgz#ea5ad6c6fe9a2c1187b025bf42424d28050ee696"
+ dependencies:
+ core-js "^2.5.3"
+ regenerator-runtime "^0.11.1"
+
"@babel/template@7.0.0-beta.42":
version "7.0.0-beta.42"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
@@ -3855,6 +3862,13 @@ create-react-class@^15.5.2, create-react-class@^15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.1"
+create-react-context@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+ dependencies:
+ fbjs "^0.8.0"
+ gud "^1.0.0"
+
crocket@^0.9.11:
version "0.9.11"
resolved "https://registry.yarnpkg.com/crocket/-/crocket-0.9.11.tgz#288fca11ef0d3dd239b62c488265f30c8edfb0c5"
@@ -5616,7 +5630,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
-fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
@@ -6225,6 +6239,10 @@ growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+gud@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
gzip-size@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
@@ -10234,6 +10252,13 @@ react-split-pane@^0.1.77:
prop-types "^15.5.10"
react-style-proptype "^3.0.0"
+react-spring@^4.2.1:
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-4.2.1.tgz#7bcf1eb660c88e322820b88f05355d44768c53be"
+ dependencies:
+ "@babel/runtime" "^7.0.0-beta.44"
+ create-react-context "^0.2.2"
+
react-style-proptype@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.0.tgz#be5de15358b890d83aecfaf6634cc033aa2b1483"