jquery - Velocity.js, webpack and $.Velocity.RunSequence -
i have velocity.js library working within webpack environment on basic level, when try call $.velocity.runsequence function i'm getting error that: $.velocity.runsequence not function
.
i'm pretty sure way i'm importing velocity , jquery libraries, following docs on http://velocityjs.org/#dependencies (using module loader: browserify section) doesn't fix issue. using velocity animations on basic level (ie. not sequence) works fine.
webpack.config.js
const path = require('path'); const webpack = require('webpack'); const htmlwebpackplugin = require('html-webpack-plugin'); module.exports = { entry: { filename: './index.js' }, output: { path: path.resolve( __dirname, 'dist' ), filename: 'bundle.js' }, devtool: 'cheap-module-eval-source-map', module: { loaders: [ { test: /\.jsx$/, exclude: '/node_modules/', loader: 'babel-loader', query: { presets: [ 'es2015' ] } } ] }, plugins: [ // uglify new webpack.optimize.uglifyjsplugin(), // extract html & css new htmlwebpackplugin({ template: './src/index.html' }), // https://stackoverflow.com/a/35884552 new webpack.provideplugin({ $: 'jquery', jquery: 'jquery', 'window.jquery': 'jquery' }) ] };
app.jsx
import 'velocity-animate'; const $svgrect = $( '#svg-rect' ), $svgelem = $( '#svg-element' ); $(document).ready(function(){ const svgrectsequence = [ { e: $svgrect, p: { x: 100, y: 100 }, o: { duration: 2000 } }, { e: $svgrect, p: { x: 100, y: 0 }, o: { duration: 2000 } }, { e: $svgrect, p: { x: 0, y: 100 }, o: { duration: 2000 } }, { e: $svgrect, p: { x: 0, y: 0 }, o: { duration: 2000 } } ]; $.velocity.runsequence( svgrectsequence ); });
thanks - thinking lost cause , may need submitting velocity.js maintainers thought should check here first.
i needed add 'velocity-ui-pack' in order use runsequence function. thread closed.
Comments
Post a Comment