OSUblake

@GreenSock did you get a chance to look at this yet?

My bad. It's supposed to go in an array. var tw = gsap.to([myMapContents, myMapShadows, myMapExtras, myGridClose, myGridFar], { duration: dur, x: gsap.utils.wrap([deltaX, deltaX * .96, deltaX * .8, deltaX * .6, deltaX * .4]), y: gsap.utils.wrap([deltaY, deltaY * .96, deltaY * .8, deltaY * .6, deltaY * .4]), ease: "power2", onComplete: moveMapComplete, onCompleteParams: [instance], onUpdate: onTweenUpdate, onUpdateParams: [instance, dur] });

Inside gsap callbacks, this is the tween/timeline unless you change the scope, but I'm not going to get into that right now. So '{self}' is the same thing as this.

Please make a simple demo, because I can't tell what those params are from your code snippet. Like I don't know where instance is coming from, or what that is supposed to be. But this is most likely wrong. onUpdateParams: [this, instance, dur] Just like this. onUpdateParams: [instance, dur] Use this inside the function for the tween. function onTweenUpdate(instance, totaltime){ if(instance.onUpdateTween){ instance.onUpdateTween(this.time().toFixed(2), totaltime); } if(this.progress() > .8 && !onTweenDrawn){ // if already drawn once, takes no further action if(!instance.isDrawn){ instance.draw(); } onTweenDrawn = true; } }

There is no cycle in v3. Use gap.utils.wrap() or gsap.utils.wrapYoyo(). https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() https://greensock.com/docs/v3/GSAP/UtilityMethods/wrapYoyo() var tw = gsap.to([myMapContents, myMapShadows, myMapExtras, myGridClose, myGridFar], { duration: dur, x: gsap.utils.wrap([deltaX, deltaX * .96, deltaX * .8, deltaX * .6, deltaX * .4]), y: gsap.utils.wrap([deltaY, deltaY * .96, deltaY * .8, deltaY * .6, deltaY * .4]), ease: "power2", onComplete: moveMapComplete, onCompleteParams: [instance], onUpdate: onTweenUpdate, onUpdateParams: [instance, dur] }); Notice the string ease. Much shorter. "power2" is the same as "power2.out". Be sure to check out the release notes.

Just use this inside a regular function. gsap.to({}, { onUpdate: onTweenUpdate }); function onTweenUpdate() { console.log(this); }

Another benefit is that you can use function based values. gsap.to(".box", { duration: i => (i + 1) / 4, x: 200 }); https://codepen.io/osublake/pen/3b45dbd961f8c12e15170827914ca9ed

@kreativzirkel Tell your colleague not to use Function like that. https://stackoverflow.com/a/51745041/2760155 This should fix those errors. const enter = (el: HTMLElement, done: (...args: any[]) => void) => gsap.timeline({ onComplete: done }) .from(el, duration, { xPercent: 100, ease: easing, clearProps: 'xPercent' }); const leave = (el: HTMLElement, done: (...args: any[]) => void) => gsap.timeline({ onComplete: done }) .to(el, duration, { xPercent: 100, ease: easing });

It might be related to this? https://github.com/greensock/GSAP/issues/322

A couple weeks. I'm working on it right now, but I don't know when the next patch is going out, so just keep checking for new versions. Using // @ts-ignore can help you out until then.

Yeah, it's more typescript issues that need to be fixed. cc @Dipscom Try silencing the errors like this. // @ts-ignore const enter = (el: HTMLElement, done: Function) => gsap.timeline({ onComplete: done })

You're using TypeScript? The definitions aren't finished for the eases. That's actually what I was just working on. They'll be ready in the next or two. In the meantime, you can do this. That should silence it. declare var Power3: any; Use imgur.

That's the correct way. What problem are you having? But you don't have to import any eases. Just use strings. They're much shorter.

Maybe not. ScrollMagic needs to change the onOverwrite property. Open an issue with them. ScrollMagic isn't a gsap product. https://github.com/janpaepke/ScrollMagic

Isn't it working in the demo I posted? That's using v3.