[typescript build error "Duplicate identifier 'TimelineMax'"]

37 minutes ago, ZachSaucier said:

@types declarations - you don't need them and they are invalid with GSAP 3

 

I think you might be able to get those removed so people will stop trying to install them.

https://github.com/DefinitelyTyped/DefinitelyTyped#removing-a-package

 

 

[NextJS and gsap]

5 hours ago, GreenSock said:

I would assume that gets the UMD version of ScrollTrigger, but the ES Module of GSAP (the core). Shouldn't it look like this?

import { gsap } from 'gsap/dist/gsap';
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

 

 

I think import { gsap } from 'gsap' gets the umd version in nextjs based on the main field in the package.json.

 

 

[ScrollTrigger doesn't work properly on page with lazy load images]

24 minutes ago, OSUblake said:

Unless I'm missing something here, the window load event will fire when all the images have been loaded. 

 

@GreenSock does ScrollTrigger listen for the load event? I guess even if it did, if someone adds window.onload = function() {}, then it screws it up.

[ScrollTrigger doesn't work properly on page with lazy load images]

3 hours ago, ZachSaucier said:

window.onload doesn't run after the images have all loaded. It runs before that.

 

Unless I'm missing something here, the window load event will fire when all the images have been loaded. 

 

[Global not showing in Actions panel]

4 hours ago, ZachSaucier said:

I don't know of anyone here that is a regular Adobe Animate user. Maybe there's someone that I'm not aware of  

 

I think @Carl is.

[Ease Visualizer change?]

Can we get that fixed? Someone else asked me about this last night.

[Import GSAP plugins with Nuxt.js]

Sorry, but I really don't have a lot of experience with ScrollTrigger. Try asking your question in a new topic.

[Import GSAP plugins with Nuxt.js]

1 minute ago, yulia said:

Hmm, why then should I connect plugins in the config file?

 

There is no reason to... unless you really want to make gsap global.

 

gsap.install(window)

 

But if you're trying to make it global, then you should probably just go ahead and use a CDN for better caching.

https://cdnjs.com/libraries/gsap

 

 

[Import GSAP plugins with Nuxt.js]

1 hour ago, yulia said:

Gsap only starts working if I connect it on the page where the component is imported.

 

That's the correct way. Gsap isn't global, so you have to import it in every file where you use it.

 

 

[Performance optimization with draggable paralax effect]

Hard to say what if any performance problems there might be without seeing a demo.

 

The quickSetter just set values, so maybe you are mistaking that for performance problems. 🤷‍♂️ If you need a smooth transition, then you can interpolate changes like in this demo.

 

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

And the most performant way to use quickSetter is to specify the property.

this.hillsXSetter = gsap.quickSetter(this.hills, 'x', 'px')

this.hillsXSetter(s / 5)

 

Also, setting will-change: transform in your css for the images can improve performance.

 

[Canvas Animations stop performing]

On 6/26/2020 at 6:46 PM, Ivan Dzhurov said:

  return new Promise((done): void => {

      gsap.to(this.speed, {

          duration: this.spinConfig.startTime,

          ease: Back.easeOut,

          value: this.config.speed,

          delay: this.config.startDelay,

          onUpdate: () => console.log(this.speed.value),

          onComplete: (): void => done()

      });

  });

 

Just a little tip. You don't need to wrap the animation in a promise as gsap animations are promisified, i.e. returning the animation is the same as returning a promise that will resolve on complete.

 

return gsap.to(this.speed, {
  duration: this.spinConfig.startTime,
  ease: Back.easeOut,
  value: this.config.speed,
  delay: this.config.startDelay,
  onUpdate: () => console.log(this.speed.value)
});

 

https://greensock.com/docs/v3/GSAP/Tween/then()

https://greensock.com/docs/v3/GSAP/Timeline/then()

 

 

[Apply transform as is]

Here's a good article that explains how some of the stuff is calculated.

https://css-tricks.com/svg-animation-on-css-transforms/

 

46 minutes ago, larsvers said:

After some attempts including setting the svgOrigin in the gsap tween to "0  0" as well as the initial transformed position of "2.5 5" I can't seem to get the desired outcome.

 

What's the desired outcome? Don't look at the matrix. What do you want it to do visually?

 

[reset all animations when returned to page]

Probably has to do with you dynamically changing the location. You might need to use cache busting url.

https://stackoverflow.com/a/14197329/2760155

 

Or force it to reload.

https://stackoverflow.com/a/14197317/2760155

 

But I would probably start with calling the animation on load, or maybe using barba to do the route changes.

https://barba.js.org/

 

[reset all animations when returned to page]

Do you have a demo of that? I've never seen anything like that happen before.

 

 

[reset all animations when returned to page]

I have no idea why you would even need to use unload for an animation as it won't wait for it to finish without some hacks.

[SVG image magny glass effect]

Here's how you can do the zooming.

 

See the Pen MErWRb by osublake (@osublake) on CodePen

 

 

[draggable within a draggable]

2 hours ago, mallanaga said:

If I position the element manually, though, it goes back to jumping

 

How are you positioning it?

 

gsap.getProperty() returns the transform: translate values, which would be different if you were setting the position with left/top. 

 

The transform can be set in your CSS, inline, or with gsap. If you want to use to left/top, then this would need to change.

 

const dx = cardX + (parentX - gsap.getProperty(newParent, "x"));
const dy = cardY + (parentY - gsap.getProperty(newParent, "y"));

 

To something like this.

const a = newParent.getBoundingClientRect();
const b = oldParent.getBoundingClientRect();

const dx = cardX + (b.left - a.left);
const dy = cardY + (b.top - a.top);

 

 

[draggable within a draggable]

See this demo.

 

See the Pen d922bc6094b169036c7b128118cbff0b by osublake (@osublake) on CodePen

 

 

[draggable within a draggable]

4 hours ago, mallanaga said:

As soon as I move it, it jumps again.

 

When you move the area and then drag the card to the table, sending just the position of the card would be incorrect. The position on the table would be the area x/y + the card x/y. 

 

If needed, you can grab the x and y values of any element using gsap.getProperty().

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

If you're moving the card from the table to another part of the table, then sending just card's x/y would be ok. There would be no need to do any sort of calculation. Just tween to the new position.

 

[draggable within a draggable]

4 hours ago, mallanaga said:

I feel like I'm honing in on the culprit. I move the "Draw" area to the middle of the table on page load.

 

Does that need to be draggable? If every client can move that around, then I think you're going to have to add in some more logic as it's going offset stuff. If it's stationary, then it will be much easier.

 

 

[modifiers and pixi plugin]

If you need to animate x and y, you really don't need to use pixi plugin. x and y are properties of the display object. The plugin helps out for stuff like scale.

 

tl.to(part,{
  pixi:{
    scale:0.5
  },      
  duration: 4,
  x: 500,
  y: 500,
  modifiers:{
    x:function(x){return 0; } // for test :D 
  }
});

 

[Scale Image to Full Screen on click. Horizontal scroll case]

This does a full screen calculation. Might need to combine this with a FLIP animation.

 

See the Pen QWyLVLO by osublake (@osublake) on CodePen

 

 

[draggable within a draggable]

59 minutes ago, mallanaga said:

Regarding the update. The clients won't have the benefit of an onPress event. Won't they need a "manual" call to update? or would the tween be sufficient?

 

No. A client only needs to call update when they start dragging. It doesn't need to happen on every client.

 

I had a real-time dragging demo up on CodePen, but it looks like my Firebase account is all screwed up.

 

See the Pen gPeeJN by osublake (@osublake) on CodePen

 

But you can see how I handle the dragging and animation in the MagnetController class. Every draggable was an instance of the MagnetController class. The onChange event would fire when something changed, like dragging the magnet.

 

class MagnetController {
    
    active  = false;
    time    = 0;
    board   = document.querySelector(".board");
    data    = this.firebaseData.magnet(this.magnetId);      
    unwatch = this.data.$watch(this.onChange.bind(this));

    draggable = null;

    constructor(
      private $element, 
      private $scope, 
      private $timeout, 
      private firebaseData) {
                       
      this.data.$loaded(event => {
        
        if (!this.data.content || !this.data.zIndex) {
          TweenLite.set($element, { autoAlpha: 0 });
          this.remove();
          return;
        }
        
        this.init();
      });
      
      this.data.$ref().onDisconnect().update({ locked: false });
    }

    init() {
      
      this.draggable = new Draggable(this.$element, {
        onDrag: this.onDrag,
        onPress: this.onPress,
        onRelease: this.onRelease,
        zIndexBoost: false,
        callbackScope: this,
        liveSnap: {
          x: n => this.active ? n : this.data.x,
          y: n => this.active ? n : this.data.y
        }      
      });
    }

    onChange(event) {
           
      var config = {
        rotation : this.data.rotation,
        zIndex   : this.data.zIndex || Draggable.zIndex
      };

      if (!this.active) {
        config.x = this.data.x;
        config.y = this.data.y;
      }
      
      TweenLite.to(this.$element, this.time, config);
      
      this.time = 0.07;
    }

    onPress(event) {
      
      if (this.data.locked) return;
      
      this.draggable.update();      
      this.updateDraggable();
      this.active = true;
      this.data.locked = true;
      this.data.zIndex = Draggable.zIndex++;
      this.data.$save(); 
    }

    onRelease(event) {
            
      if (!this.draggable.hitTest(this.board)) {
        this.remove();
        return;
      }
      
      if (!this.active) return;
            
      this.active = false;
      this.data.locked = false;
      this.data.$save(); 
    }

    onDrag(event) {
      
      if (!this.active) return;
      
      this.data.x = this.draggable.x;
      this.data.y = this.draggable.y;
      this.data.$save();
    }

    remove() {
      
      this.draggable && this.draggable.kill();
      this.unwatch();
      this.data.$remove().then(ref => {        
        this.$scope.$destroy();
        this.updateBoard();
      }, error => {
        console.log(error);
      });
    }
  }

 

 

[draggable within a draggable]

You don't need this line. You're updating the draggable onPress.

 

Draggable.get(target).update(true, true);

 

When reparenting, you should do a FLIP animation.

 

See the Pen GxYPOX by osublake (@osublake) on CodePen

 

 

See the Pen oNveWXv by GreenSock (@GreenSock) on CodePen

 

 

[Ideal vue.js setup for playing and reversing timelines]

Oh, it would need to be an arrow function.

this.introTl.reverse().eventCallback("onReverseComplete", () => {
      this.introTl.kill();
      this.introTl = null;
      next();
    });