Jump to content

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


Popular Content

Showing content with the highest reputation on 07/21/2019 in all areas

  1. @GreenSock this was going to be my follow up question... but why? Thank you for the beautiful explanation!
    1 point
  2. Uh oh, the GSAP Moderators have spit into two opposing IE11 factions, led by Blake and Jonathan respectively. Civil war will soon follow?
    1 point
  3. Yep, just to be clear about why this is happening... In order to maximize performance, GSAP caches the transform values after the first time it parses them because typically it's a huge waste to read the computed style again and decompose the matrix() or matrix3d() into the components (x, y, scaleX, rotation, etc.). You can force GSAP to re-parse them by setting parseTransform:true on your tween, but I'd strongly recommend always handling transforms directly through GSAP so that you get maximum performance. It also avoids rotational ambiguities that come from decomposing matrices (that's just the nature of them - it has nothing to do with GSAP) You had a percentage-based translate transform on your element that was set in the CSS, but when the browser reports the computed value it's always as a matrix() or matrix3d() which never contains percentage-based information - it's all converted to px, so GSAP simply cannot know that your intent is to use percentage-based values. This is another reason why it's best to use GSAP for all this because it'll store all of that data for you and keep it crystal clear for all future tweens So to "fix" your old version, you can just set all those values through GSAP (best), or you could simply add parseTransform:true to your tween and put a tl.invalidate() in your click handler so that it tells the timeline to re-initialize things on the next render. Like @ZachSaucier suggested, the simplest, most bullet-proof solution is to just use GSAP for it all instead of mixing CSS and GSAP. Happy tweening!
    1 point
  4. I know I've posted that image more than once, but it took me awhile to find. I had to do an image search on Google. And yeah, I had no idea it was that long ago. I'm getting old. ?
    1 point
  5. Hi JDmko! I have actually been using GSAP in my Angular projects recently and it isn't too bad. If you just want the base library you just need to run npm install --save gsap @types/gsap Now in any component you can just import what every you need like you would any other module import { TimelineLite, Back, Power1, SlowMo } from 'gsap' function something () { const tl: TimelineLite = new TimelineLite() } There are a few small things I have learned about doing this stuff the "angular way". The main one is referencing elements in the dom. You just want to use variables in your controller like this: @ViewChild('box1') box: ElementRef @ViewChildren('btn') btnContainers: QueryList<ElementRef> //Then in a tween function tween(): void { const box: Element = this.box.nativeElement const btnArr: Element[] = this.btnContainers.map(btn => btn.nativeElement) TweenLite.to(box, 1, {opacity: 1}); TweenLite.to(btnArr, 2, {opacity: 1}); }
    1 point
  6. Hi @hisco, Here's a little playing around - because I like coffee and enjoying the slowness ... Enjoy slow food animation ... Mikel
    1 point