Jump to content
GreenSock

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

OSUblake last won the day on November 16

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    4,802
  • Joined

  • Last visited

  • Days Won

    484

OSUblake last won the day on November 16

OSUblake had the most liked content!

Community Reputation

11,000 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

19,642 profile views
  1. @GreenSock did you get a chance to look at this yet?
  2. 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] });
  3. 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.
  4. 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; } }
  5. 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.
  6. Just use this inside a regular function. gsap.to({}, { onUpdate: onTweenUpdate }); function onTweenUpdate() { console.log(this); }
  7. 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
  8. @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 });
  9. It might be related to this? https://github.com/greensock/GSAP/issues/322
  10. 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.
  11. 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 })
  12. 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.
  13. 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.
  14. 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
  15. Isn't it working in the demo I posted? That's using v3.
×