How to use @pluginjs/easing - 6 common examples

To help you get started, we’ve selected a few @pluginjs/easing 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 pluginjs / pluginjs / modules / scroll / src / main.js View on Github external
}
    // cancel frame when a scroll event's happening
    if (currentFrame) {
      window.cancelAnimationFrame(currentFrame)
    }

    // scroll looping over a frame
    step({
      scrollable,
      method,
      startTime,
      startX,
      startY,
      x: parseInt(x, 10),
      y: parseInt(y, 10),
      easing: easing.get(easingStatus) || easing.get('ease'),
      duration: parseInt(duration, 10),
      frame,
      complete
    })
  }
github pluginjs / pluginjs / modules / scrollbar / src / main.js View on Github external
}
    }

    // Current state information for the drag operation.
    this._drag = {
      time: null,
      pointer: null
    }

    // Current timeout
    this._frameId = null

    // Current handle position
    this.handlePosition = 0

    this.easing = easing.get(this.options.easing) || easing.get('ease')

    this.setupStates()
    this.initialize()
  }
github pluginjs / pluginjs / modules / scrollable / src / main.js View on Github external
}

    // Current state information.
    this.privateStates = {}

    // Supported direction
    this.horizontal = null
    this.vertical = null

    this.$bar = []

    // Current timeout
    this._frameId = null
    this.privateTimeoutId = null

    this.easing = easing.get(this.options.easing) || easing.get('ease')

    this.setupStates()
    this.initialize()
  }
  /* eslint-disable complexity */
github pluginjs / pluginjs / modules / before-after / src / main.js View on Github external
super(element)

    this.setupOptions(options)
    this.setupClasses()

    // Current state information for the drag operation.
    this._drag = {
      time: null,
      pointer: null
    }

    this._position = null // position cache for the drag operation.
    this.position = 0
    this.width = getWidth(this.element)
    this.height = getHeight(this.element)
    this.easing = easing.get(this.options.easing) || easing.get('ease')

    this.setupStates()
    this.initialize()
  }
github pluginjs / pluginjs / modules / tween / __tests__ / tween.spec.js View on Github external
test('easing', done => {
      expect.hasAssertions()
      const easingFunc = Easing.get('easeIn')

      new Tween({
        from: 0,
        to: 10,
        duration: 1000,
        easing: easingFunc
      })
        .on('update', (value, { elapsed }) => {
          if (elapsed < 950) {
            expect(value).toBeCloseTo(easingFunc(elapsed / 1000) * 10, 3)
          }
        })
        .on('complete', value => {
          expect(value).toBe(10)
          done()
        })
github pluginjs / pluginjs / modules / tween / src / main.js View on Github external
lastTime: null,
      startTime: null,
      pauseTime: null,

      [COMPLETED]: false,
      [PAUSED]: false,
      [STARTED]: false,
      [REVERSED]: props.direction === 'reverse',

      remaining: props.loop ? props.loop : false,

      _complete: cb => cb()
    })

    if (isString(this.props.easing)) {
      this.props.easing = Easing.get(this.props.easing)
    }

    const type = Object.values(TYPES).reduce((v, m) => {
      return v || (m && m.test && m.test(this.props.from) && m)
    }, false)

    if (type) {
      type.initialize(this.props, this)
    }

    if (this.props.autoplay) {
      this.start()
    }
  }

@pluginjs/easing

A workflow for modern frontend development.

GPL-3.0
Latest version published 2 years ago

Package Health Score

46 / 100
Full package analysis

Popular @pluginjs/easing functions

Similar packages