Jump to content
Search Community

Not able to move div in Angular 2.

ludusy test
Moderator Tag

Go to solution Solved by ludusy,

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

Hello there,

I trying to animate a div using GSAP on an Angular 2 project created with the CLI, I'm using the latest versions.

All seems to be fine, I have a console.log(TweenMax); on click event method that shows the proper TweenMax object structure, I believe this means that GSAP is added fine to the project. I used npm to add GSAP to my project I forgot to mentioned.

Like I said, all seems to be fine but the div is not moving.

 

Here is the project in case someone wants to run it and check it out.

 

https://github.com/estebanpadilla/angular2GSAP.git

 

Is there anyone here has experience with angular 2 besides the posts:

 

http://greensock.com/forums/topic/13445-using-gsap-with-angular2/

 

I already check that post and other linked to this one but I had no luck.

 

Well, I hope someone can help me!

Thank you.

 

 

angular2GSAP.zip

Link to comment
Share on other sites

Can you make a demo in CodePen or Plunker?

 

I'm not familiar with the CLI, but somebody sent this to me. It was based on a question asked in this thread.

http://greensock.com/forums/topic/14430-draggable-shifting-after-dynamically-setting-on-new-elements/

 

You may find something in here that is the fix...

 

 

I have to dynamically change some of the Tweens in a timeline which can happen at anytime through play out.  this can be because the elements are able to move when clicked and the timeline has to hold the reference of the new location.  even during the reverse playback of the timeline.  so if it started at X1,Y1 plays through the timeline and then the person moves the element to X2,Y2.  the timeline should play everything back in reverse with the X2,Y2.  i think the workaround for this is i'm taking reference of all of the tweens, and whenever i see a tween with the object in reference i will replace the tween with a new one referencing the secondary X,Y Coordinates.  I know there is reference in the _gscope, but i was wondering if you ever ran into this kind of scenario before and if you've seen a workaround like this or anything else that would do a similar operation?

 

for the other way of starting off the project i followed the 3rd party setups from the angular.io documentation and was able to get it to load with the system module loader nicely.

 

 

if you go to the system-config.ts, angular-cli-build.js file and update the packages as such

system-config.ts

const map: any = {
    'hammerjs': 'vendor/hammerjs/hammer.min.js',
    'gsap': 'vendor/gsap/src/minified/TweenMax.min.js',
    'tweenmax': 'vendor/gsap/src/minified/TweenMax.min.js',
    'timeline': 'vendor/gsap/src/minified/TimelineMax.min.js',
    'throwpropsplugin': 'vendor/gsap/src/minified/plugins/ThrowPropsPlugin.min.js',
    'drawsvgplugin': 'vendor/gsap/src/minified/plugins/DrawSVGPlugin.min.js',
    'morphsvgplugin': 'vendor/gsap/src/minified/plugins/MorphSVGPlugin.min.js',
    'easepack': 'vendor/gsap/src/minified/easing/EasePack.min.js',
    'draggable': 'vendor/gsap/src/minified/utils/Draggable.min.js',
    'findshapeindex': 'vendor/gsap/src/minified/FindShapeIndex.js'
};


/** User packages configuration. */
const packages: any = {
 'hammerjs': {format: 'cjs'},
 'gsap':  {format: 'cjs'},
 'tweenmax':  {format: 'cjs'},
 'timeline':  {format: 'cjs'},
 'throwpropsplugin':  {format: 'cjs'},
 'drawsvgplugin':  {format: 'cjs'},
 'morphsvgplugin':  {format: 'cjs'},
 'easepack':  {format: 'cjs'},
 'draggable':  {format: 'cjs'},
 'findshapeindex': {format: 'cjs'}
};

angular-cli-build.js

 

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
 
module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'gsap/src/minified/**/*.js',
      'hammerjs/hammer.min.js',
      'rxjs/**/*.js',
      '@angular/**/*.js'
    ]
  });
};
 
 
 
and in the component
import 'gsap';
declare var TimelineMax: any;
declare var TweenMax: any;
declare var Back: any;
declare var Draggable: any;
declare var Linear: any;

doing it in this manor you also don't need to use this, and can remove the script reference from the index.html.

System.set("gsap", System.newModule({
"default": window.com.greensock
})); 

this works beautifully and also can be minimized with production flag set in the CLI utility.(minifies and gzips using the prod build)

 

 

 

 

  • Like 1
Link to comment
Share on other sites

  • Solution

OSUblake,

 

Thank you for your help.

I found what was the problem and I'm able to use GSAP on my Angular project.

Like I said on my request, I was printing in console the Tween object and I thought that everything was fine with that and the issue could be related to the object from the DOM, and that was the issue, I was not getting the object from the view. Looking around I found how to get the object on Angular 2 without using any external libs like jquery.

 

Thank you again.

 

 

 

 

 

Can you make a demo in CodePen or Plunker?

 

I'm not familiar with the CLI, but somebody sent this to me. It was based on a question asked in this thread.

http://greensock.com/forums/topic/14430-draggable-shifting-after-dynamically-setting-on-new-elements/

 

You may find something in here that is the fix...

Link to comment
Share on other sites

I case someone needs to know.

The only thing I did to add GSAP to my project is this.

Used NPM to add GSAP.

 

Added this lines to typings.d.ts to avoid errors.

declare let TimelineMax: any; 
declare let TimelineLite:any;
declare let TweenMax:any;
declare let TweenLite:any;
 
And that's all.
 
Thank you.
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...