How to use the react-spring.AnimatedValue function in react-spring

To help you get started, we’ve selected a few react-spring examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-spring / react-spring / src / addons / Parallax.js View on Github external
initialize() {
    const props = this.props
    const parent = this.parent
    const targetScroll = Math.floor(props.offset) * parent.space
    const offset = parent.space * props.offset + targetScroll * props.speed
    const to = parseFloat(-(parent.current * props.speed) + offset)
    this.animatedTranslate = new AnimatedValue(to)
    this.animatedSpace = new AnimatedValue(parent.space * props.factor)
  }
github Bandwidth / shared-components / src / behaviors / ExpandToggle / FixAuto.js View on Github external
const convert = (acc, [name, value]) => ({
  ...acc,
  [name]: new AnimatedValue(value),
});
const overwrite = (width, height) => (acc, [name, value]) => ({
github fluidtrends / carmel / chunks / intro / components / animatedSection.js View on Github external
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { AnimatedValue, Spring, animated, interpolate, controller as spring } from 'react-spring'
import { database } from 'firebase';
import { action } from '@storybook/addon-actions'

const animation = new AnimatedValue(1)

const animations = {
  opacity: {
    opacity: animation.interpolate({ range: [1, 2], output: ['0', '1'] })
  }
}
const animationMap = (animationType) => {
  return animations[animationType]
}

export default class AnimatedSection extends Component {

  constructor(props) {
    super(props)
  }
github fluidtrends / chunky / web / src / components / AnimatedSection.js View on Github external
import React, { Component } from 'react'
import { AnimatedValue, Spring, animated, interpolate, controller as spring } from 'react-spring'

const animation = new AnimatedValue(1)
const animationChecker = ['opacity', 'slideFromLeft', 'slideFromRight']

const animations = Object.freeze({
  opacity: {
    opacity: animation.interpolate({ range: [1, 2], output: ['0', '1'] })
  }
})

const animationMap = (animationType) => {
  return animations[animationType]
}

/**
 * Component for animating children.
 * For now it only supports opacity and slide form left or slide from right. More to be added
 * 
github react-spring / react-spring / src / addons / Parallax.js View on Github external
scrollTo(offset) {
    const { horizontal, config, impl } = this.props
    const scrollType = getScrollType(horizontal)
    this.scrollStop()
    this.offset = offset
    const target = this.container
    this.animatedScroll = new AnimatedValue(target[scrollType])
    this.animatedScroll.addListener(({ value }) => (target[scrollType] = value))
    controller(
      this.animatedScroll,
      { to: offset * this.space, ...config },
      impl
    ).start()
  }
github react-spring / react-spring / src / addons / Parallax.js View on Github external
initialize() {
    const props = this.props
    const parent = this.parent
    const targetScroll = Math.floor(props.offset) * parent.space
    const offset = parent.space * props.offset + targetScroll * props.speed
    const to = parseFloat(-(parent.current * props.speed) + offset)
    this.animatedTranslate = new AnimatedValue(to)
    this.animatedSpace = new AnimatedValue(parent.space * props.factor)
  }