GSAP TimeLineLite.to() en passant les variables au troisième paramètre ne fonctionne pas.

Question

Je suis en train d'utiliser des variables pour les quatre paramètres TimeLineLite.to(param1, param2, param3, param4);

paramètres 1, 2 et 4 variables prendre des très bien, cependant, le paramètre 3 explose quand je mets tout type de variable en elle. J'ai besoin d'aide pour comprendre pourquoi!

Les paramètres sont structurés comme si .to(target:Object, duration:Number, {vars:Object}, position:*);

Ceci est la documentation que je l'ai regardé jusqu'à présent, mais je ne peux pas trouver quoi que ce soit sur les variables passant aux paramètres ou toute indication quant à la raison pour laquelle il ne devrait pas travail.

1) TimeLineLite intro section

2) .to() documentaion

De plus, voici une codepen avec les deux modèles, ils sont tous deux identiques en plus pour le paramètre 3. Vous pouvez cliquer n'importe où pour redémarrer l'animation. Quelqu'un peut-il m'aider s'il vous plaît comprendre pourquoi le deuxième gars GreenSock ne bougera pas?

codepen: codepen.io example of my problem.

Answer 1

Lorsque vous essayez de faire référence à une clé d'objet avec une variable, vous devez les envelopper entre crochets.

Prenons l'exemple suivant:

var direction = 'left'; 
var someObject = { left: 200 }; 
console.log(someObject.direction); 
console.log(someObject[direction]); 

La première déclaration console.log reviendrait undefined parce qu'un tel key le nom de direction est présent à l'intérieur someObject. Toutefois, le deuxième appel console.log renverra la valeur 200 car vous avez traité direction comme une variable qui stocke une autre valeur de chaîne stockée en elle, c'est-à-dire 'left' et après le calcul cela deviendrait someObject['left'] qui, par conséquent, vous renvoie le résultat correct de 200.

En bref, modifiez votre ligne variableDriver.to(...) à:

variableDriven.to(".variable-driven", 3, { [direction]: distance });

Hope this helps.