[TypeError with Draggable .create Angular 8 and GSAP 3]

Thanks Jack!

 

Sorry about that, I totally missed the register plugin feature, I guess when all else fails read the documentation....

 

Thanks again for an awesome platform!

[TypeError with Draggable .create Angular 8 and GSAP 3]

Hi,

 

Hoping someone may have some insight into why I'm getting this type error. GSAP v3 itself is working great with Angular 8 and I'm enjoy many of the new features however I ran into a type error with Draggable on the create method:

 

ERROR TypeError: _toArray is not a function
    at Function.create (Draggable.js:2612)

 

Has anyone else run into this and know of a possible solution?  I've tried all the different imports and the top declaration of Draggable but all of those work arounds were for GSAP v2 and don't appear to work here. 

 

 

 

 

[Just saying thanks for the 2.0 release!]

Thank you Jack and crew for GSAP 2.0.0 Released and an especial thank you for the ES modules version of the GSAP libs!

[Use TweenLite/Max without a browser?]

Old post but incase anyone else finds this through a search, I came across this seed which helped me: https://github.com/devyaz/Nativescript-GsapAnimation-

 

I have found that with NativeScript it's best to experiment with the property type you want to animate.

[Angular2 importing Draggable using ES6]

I'm able to import and use TweenMax in Angular2 with ES6 and it's working great in the environment.

 

I've include the gsap libs into my build through npm and I'm importing the module using ES6 like so:

/**
* Import Libs
*/
import * as TweenMax from 'gsap';
/**
* Exports for others scripts to use
*/
window.TweenMax = TweenMax;

but when attempting to import the Draggable utility

import * as Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min';

I get the following error: 

Draggable.min.js:15 Uncaught Error: Cannot find module "TweenLite" 

In ES6 do I have to export TweenMax first for the Draggable module or is there another method for making the TweenMax module available for the Draggable module? 

[Using GSAP with Angular2]

Have a couple questions; 

1. has anyone been able to use any of the built in element selectors in ng2 instead of JQuery?
2. I'm working with the ng2 beta in es6 and when the component loads the JQuery selections are not available but are available on function click calls. I'm wondering if anyone knows if this is a similar issue as the two cpu cycle rendering with ng1?
3. is there a two cycle solution for ng2 since I'm pretty sure ng2 doesn't contain the built in apply method from ng1?

 Sorry that these questions are a little off topic but I think people that have found this thread will most likely have the same questions.

 

Update:

A better solution for JQuery selection in ng2 is to wrap your selections with ngOnInit:

    ngOnInit() {
        let obj1 = $('h1');
        obj1 = $('h1');
        console.log('obj1 : ', obj1.length);
        TweenMax.to(obj1, 0.75, {
            autoAlpha: 0,
            ease: Power4.easeOut
        });
    }

[call draggable's snap on scroll end]

Thanks a ton, exactly what I was looking for! 

[call draggable's snap on scroll end]

Is it possible to call draggable's snap method on the completion of a scroll? The snap is working perfect on drag complete (type scrollLeft) but I'd like it to behave the same way on the completion of a horizontal scroll, is this possible?

[Draggable with type scrollLeft, controll scroll area width]

I've been working with the Draggable 'scrollLeft' type with a dynamic number of elements that determine the width of the drag/scroll area. What I'm wondering is, if there's a way to shift the the draggable area, or the elements within, so that the first element can begin and last element end at the center of the screen when dragging/scrolling? I would use padding on the inside of the scrolling area but padding applied to the right has no visible effect on the scroll area width or the internal elements position, left padding works as expected

 

[repeating animation causes performance issue]

Hey Carl,

 

figured it out. As it turns it's an issue that was introduced by the developer and not a Greensock animation issue. Was iteratively adding handlers and with each replay of the build the calls to the handlers were iteratively increasing.

 

Really loving the greensock.js, it fills out the empty spot in my .js library perfectly

[repeating animation causes performance issue]

Sorry about that, the file can be downloaded from here:

http://cbstage.viatraining.com/tsfl/test.zip

[repeating animation causes performance issue]

Have a build animation for a page that uses the stagger method, when repeating the animation it plays as expected the first four times it's played but if you repeat it a fifth time or more the animation chokes. There's a tweenMax killAll at the start of the animation that should take care of any overlapping animations.

 

I've attached the files, you can run the sample code by launching 'html/Course.htm'. Any help in determinig what is causing the performance issue would awesome.

[HTML or CSS tags in XML text content]

Thanks a lot, this:

    

       <b>Tomorrow is Monday</b>

is exactly what I had in mind.

[HTML or CSS tags in XML text content]

Hi,

 

Is it possible to use HTML or CSS tags in XML text content?

 

here's my loader:

private function loadMp3 ():void {
LoaderMax.activate([MP3Loader, CSSLoader]);
queue1 = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler});
queue1.append( new CSSLoader("./css/flashSiteStyles.css", {name:"flashStyleSheet"}) );
queue1.append( new XMLLoader("./xml/mp3List.xml", {}));
queue1.load();
}

 

Here's my XML:

 

When my load gets to the mp3Title attribute the load silently fails. If I remove the tags it loads fine. I've tried escaping the tags with CDATA but there doesn't seem to be a way to wrap the content since it's in an attribute.

[MP3 rewind and fast forward using gotoSoundTime]

Wouldn't you know it, the answer was TweenMax

 

		
public function rewind ():void {
currentTrackLoader = LoaderMax.getLoader(currentTrack);
if((currentTrackLoader.soundTime + rewindStepParam) > 0) {
	trace(currentTrackLoader.soundTime + '\n' + currentTrackLoader.duration);
	currentTrackLoader.gotoSoundTime(currentTrackLoader.soundTime - rewindStepParam);
	TweenMax.delayedCall(.5, rewind);
}
}

This does the trick but if anyone has a better idea please share!

[MP3 rewind and fast forward using gotoSoundTime]

Attempting to use gotoSoundTime to rewind and fast forward an MP3 -

 

var rewindStepParam:int = 1;
currentTrackLoader = LoaderMax.getLoader(currentTrack);
while(currentTrackLoader.soundTime > 0) {
trace(currentTrackLoader.soundTime + '\n' + currentTrackLoader.duration);
currentTrackLoader.gotoSoundTime(currentTrackLoader.soundTime-rewindStepParam , true);
}

While this does work there's no audio queue which is what I was the effect I was aiming for. Hoping that someone may have some experience with this and can point me in the right direction. I was thinking of trying it with a timed loop to see if that would introduce the desired effect but if someone has a better idea....

 

Thanks in advance for any help!