New to GSAP - Invalid property transform set to translate(-627px,0px) Missing plugin? gsap.registerPlugin()

[GillesG]

Hello All,

 

Quite new to GSAP, I am using an App coded in vue2 and Using GSAP in e avery simple way.

I am in a migration journey, but there are rocks on the road.

 

My (vue 2) App is using the following code with out any issue

 

  private animateSupplyCardSort() {
    const sortedCards = SupplyCardSorter.sort(this.supplyCards.concat(), this.sortOption, this.$t.bind(this));
    const descriptors = this.createMoveDescriptors(sortedCards);
    const newMapping: Map<number, number> = new Map();

    for (let descriptor of descriptors) {
      const element = this.getSupplyCardElement(descriptor.elementIndex);
      const startCoord = this.getPositionForElementIndex(descriptor.elementIndex);
      const endCoord = this.getPositionForElementIndex(descriptor.newVisualIndex);
      const x = endCoord.x - startCoord.x;
      const y = endCoord.y - startCoord.y;
      const tweenLite =
           gsap.to(element, {duration: ANIMATION_DURATION_SEC,
             transform: `translate(${x}px,${y}px)`,
             ease: Sine.easeInOut,
             onComplete: function() { 
                tweenLite.kill
                return;
                }
             }
           );

      this.activeAnimations.add(tweenLite);
      newMapping.set(descriptor.newVisualIndex, descriptor.elementIndex);
    }
    this.elementIndexMapping = newMapping;
  }

Migrating it to vue 3 the code of this function is just the same.

const animateSupplyCardSort = () => {
      const sortedCards = SupplyCardSorter.sort(supplyCards.value.concat(), sortOption.value, t);
      const descriptors = createMoveDescriptors(sortedCards);
      const newMapping: Map<number, number> = new Map();

      for (let descriptor of descriptors) {
        const element = getSupplyCardElement(descriptor.elementIndex);
        const startCoord = getPositionForElementIndex(descriptor.elementIndex);
        const endCoord = getPositionForElementIndex(descriptor.newVisualIndex);
        const x = endCoord.x - startCoord.x;
        const y = endCoord.y - startCoord.y;
        let activeAnimation =
          gsap.to(element, {
            duration: ANIMATION_DURATION_SEC,
            transform: `translate(${x}px,${y}px)`,
            ease: Sine.easeInOut,
            onComplete: function () {
              activeAnimation.kill
              return;
            }
          });
        activeAnimations.add(activeAnimation);
        newMapping.set(descriptor.newVisualIndex, descriptor.elementIndex);
      }
      elementIndexMapping = newMapping;
    }

And unfortunaltely for me at runtime I have the following messages (with multiple moving info)

FlippingCard.vue:190  Invalid property transform set to translate(-418px,0px) Missing plugin? gsap.registerPlugin().

 

What is weird is on another component, rotation animation works.

   const animateToRotation = (rotation: number) => {
      activeAnimation = gsap.to(animationParams.value, 
                { duration: ANIMATION_DURATION_SEC, 
                  rotation: rotation,
                  ease: Sine.easeInOut,
                  onComplete: () => handleAnimationEnd()
                });
    }

So GSAP is installed properly. I suppose it's link to vue 3, but how ?

 

I will try to generated a codepen,but it is not that simple, because I tested the code on a brand new Vue project and it works.

 

Some informations if you are interested :

app working : https://www.71yeti.fr

Github repos : https://github.com/gillesgros/KingdomCreator-Blake

the guilty component : https://github.com/gillesgros/KingdomCreator-Blake/blob/main/src/components/SortableSupplyCards.vue

a half working component :  https://github.com/gillesgros/KingdomCreator-Blake/blob/main/src/components/FlippingCard.vue

 

Github repos in vue 3 : https://github.com/gillesgros/Vite-KingdomCreator-New

the guilty component : https://github.com/gillesgros/Vite-KingdomCreator-New/blob/main/src/components/SortableSupplyCards.vue

a half working component : https://github.com/gillesgros/Vite-KingdomCreator-New/blob/main/src/components/FlippingCard.vue

 

Thanks for any advice on where to look.

 

Gilles

 

 

[GreenSock]

Welcome, @GillesG!

 

The most likely causes of that error are: 

1. The target of your animation (element in this case) is not a DOM element. Maybe you're using a ref, for example, which is not an actual element. Like in React, if someone uses a ref, they'd need to feed in ref.current as the target because that's what refers to the actual element. I'd recommend you add a console.log(element) right before your animation code to check what that is. 
2. If you do a very non-standard import, like import gsap from "gsap/gsap-core" instead of from "gsap", you'd get the core engine WITHOUT CSSPlugin which is almost never a good idea (because CSSPlugin is what handles all the CSS-related stuff and it's automatically included in gsap when you import it normally - we only offer the gsap-core thing for advanced users who don't need to animate any CSS and want to conserve file size). 

It's FAR more likely that #1 is the problem in your case. 

 

By the way, I'd recommend changing your code: 

// old
gsap.to(element, {
  duration: ANIMATION_DURATION_SEC,
  transform: `translate(${x}px,${y}px)`,
  ease: Sine.easeInOut,
  onComplete: function() { 
    tweenLite.kill
    return;
  }
});

// new
gsap.to(element, {
  duration: ANIMATION_DURATION_SEC,
  x: x, // just use x/y instead of transform because they're faster and more clear
  y: y,
  ease: "sine.inOut", // string syntax is the modern way. Skip the extra import.
  // there's no need to do that onComplete because it didn't actually accomplish anything.
});

Good luck!

[GillesG]

Thanks for the ideas.

 

Your point was correct : "element" was not a DOM element.

This was due to the fact that 

document.querySelectorAll(".grid-layout_item")[0].firstChild

is not returning the same thing with vue 2 /webpack and vue 3 / vite.js
 

the fix is 

document.querySelectorAll(".grid-layout_item")[0].firstElementChild