Can't use ThrowProps in Webpack

[bazan.erick 0 Likes (Newbie)]

I'm using ThrowPropsPlugin with no success on webpack, I Import TweenMax as

import { TweenMax } from 'gsap' 

and 

import Draggable from 'gsap/Draggable'

 

They work good, however when I try to use ThrowProps, I import it from the common-js folder of ShockinglyGreen as 

import 'app/vendor/ThrowPropsPlugin';

 

No errors, but it won't work either.

 

Any help is much appreciated, thanks!

[GreenSock 8,117 Likes (Superhero)]

Hm. You're importing the file that you got in "commonjs-flat", right? Like:

import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin'; // <- if you put ThrowPropsPlugin into your npm_modules/gsap folder
import ThrowPropsPlugin from "app/vendor/commonjs-flat/ThrowPropsPlugin"; // <- if it's in some other folder?

 

And you've got it in there in the same directory as all the other GSAP stuff, right? If you're having trouble, I'd recommend starting there (with all of the commonjs-flat stuff in the same folder, and only import things directly from there, not some from npm_modules, and some from other places). 

[thomashijmans.apps 1 Likes (Newbie)]

Got the same problem with the Draggable and ThrowPropsPlugin. When I use this code example in a method and initialise it with the ngOnInit method it returns the value after dragging the spinner, but there is no transition to the new position. I imported all the necessary commonjs-flat files in a vendor directory and can log them.

 

setDraggable(){

 

let rotationSnap:number = 90;

 

TweenMax.set(this.gsapId('rotate'), {transformOrigin:"50% 50%"});

 

Draggable.create(this.gsapId('rotate'), {

type:"rotation",

throwProps:true,

snap:function(endValue) {

 

return console.log(Math.round(endValue / rotationSnap) * rotationSnap);

}

});

 

}

[GreenSock 8,117 Likes (Superhero)]

Hm, I read your question a few times and I'm still confused about exactly what you're asking. Do you have a reduced test case demo we could look at, like in codepen or jsfiddle? That'd really help give us context. 

[thomashijmans.apps 1 Likes (Newbie)]

The throwProps smoothly glide won't show up. But my bad I used it on the <g> element inside a SVG. That will not work

[GreenSock 8,117 Likes (Superhero)]

It should be fine to use Draggable (or ThrowPropsPlugin) on a <g> element. If you're running into trouble, please provide a reduced test case (in a codepen or jsfiddle) and we'd be happy to take a peek. 

[thomashijmans.apps 1 Likes (Newbie)]

You are right. I did a test on codepen and the ThrowPropsPlugin works also on a <g> element. But in my development environment (Angular 4 & Webpack)  it won't show the ThrowPropsPlugin smoothly glide. So I checked the css styles in my console. And the g[Attribute] style is crossed out.  

 

Before I drag the draggable element the css is like this:

 

 

 

When I click the draggable element the css is like this:

 

 

 

How to change this behaviour ?

 

[GreenSock 8,117 Likes (Superhero)]

Hm, can you provide a reduced test case? It appears as though you have something setting the CSS transform property AND ALSO the "transform" attribute, so the browser must choose one to prioritize. See what I mean? 

 

We always recommend that you set transform-related data via GSAP only in order to maximize performance, compatibility, and to avoid issues like this. 

[OSUblake 9,990 Likes (Superhero)]

On 5/22/2017 at 2:35 PM, bazan.erick said:

 

import 'app/vendor/ThrowPropsPlugin';

 

 

How are you importing the ThrowPropsPlugin? Note that the code above is NOT a relative path. That's looking for a module named "app".

 

And if you're using TypeScript, importing works a little different for modules with a default export.

 

[thomashijmans.apps 1 Likes (Newbie)]

There is no problem with importing the plugins. The problem is caused by adding a Tween to the <svg> element and inside that svg creating a draggable <g> element with ThrowPropsPlugin. This causes a shuffle between the transform matrix on the element style and the attribute style. 

[OSUblake 9,990 Likes (Superhero)]

We can't tell what's going on from code snippets or screenshots.

 

Works fine with HTML elements.

https://www.webpackbin.com/bins/-KkaJTiZGn7M-kgh7htF

 

Breaks with SVG elements. A 3D matrix is added to the inline style on drag, which shouldn't happen.

https://www.webpackbin.com/bins/-KmzWwaJlU8czM7W1gw9

 

Really hard to say where the problem lies. Those are valid SVG elements. You can see the transform attribute being animated if you quickly drag and release, which is the throwProps animation.

 

I'm also noticing that usability seems to be a lot worse with a bounds.

[gogo125 5 Likes (Newbie)]

Hi guys,

 

This subject might be outdated, but there's definitely a lack of resources for working with GSAP and Angular 4+.  After Googling and experimenting for days, here is how I finally got Draggable and ThrowPropsPlugin to work properly:

 

1) Install GSAP into your project by using NPM in a command line interface in your project folder
npm install gsap --save

 

2) Copy over the files from the "bonus-files-for-npm-users" folder from your Greensock download into /node_modules/gsap folder in your project.

(you must be a shockingly green or business green member in order to download files the necessary files)

 

3) Add the appropriate import statements:
 

import 'gsap/ThrowPropsPlugin';
import * as Draggable from "gsap/Draggable";

 

4) Then just verify that it's working.  Here, we're making any images draggable:
 

ngOnInit() {
  //make all images draggable as a test
  Draggable.create('img', {
    type:"x/y",
    throwProps:true
  });
}

 

 

Hope that helps others looking to incorporate GSAP with Angular or Webpack.

 

[GreenSock 8,117 Likes (Superhero)]

Thanks, @gogo125, for posting the help for others!

[OSUblake 9,990 Likes (Superhero)]

@gogo125

 

There's plenty of examples. I know because I made them. Webpackbin merged with CodeSandbox, so all those demos are gone, but if somebody asks, I can make another version. 

 

Another thing that might make searching harder, don't use a version number. It's Angular. 

 

Also, you can add scripts to the .angular.cli.json file instead of importing.

https://github.com/angular/angular-cli/wiki/stories-global-scripts

 

"scripts": [
  "assets/gsap/TweenMax.js",
  "assets/gsap/plugins/DrawSVGPlugin.js"
]