Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bazan.erick

Can't use ThrowProps in Webpack

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 post
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 post
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 post
Share on other sites

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. 

Link to post
Share on other sites

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

Link to post
Share on other sites

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. 

Link to post
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 post
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 post
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 post
Share on other sites

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. 

Link to post
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 post
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 post
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 post
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.

×