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
