Jump to content
Search Community

Can't use ThrowProps in Webpack

bazan.erick test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

  • 4 weeks later...

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);
}
});
 
}
Link to comment
Share on other sites

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:

 

g1-min.thumb.png.c819bfe2e0560104987abab607d7224a.png

 

 

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

 

 

59437a46ee346_g2-min(2).thumb.png.abb870e7005b3e4cf6c011c97cf34d65.png

 

How to change this behaviour ?

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

  • Carl changed the title to Can't use ThrowProps in Webpackhttps://greensock.com/forums/topic/16545-cant-use-throwprops-in-webpack/
  • 9 months later...

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.

 

  • Like 2
Link to comment
Share on other sites

  • Sahil changed the title to Can't use ThrowProps in Webpack

@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"
]

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...