bonjour,

je créé des animations en JS a l'aide de GSAP, comme je veux faire pas mal d'animations je n'ai pas envie de copié coller l'entièreté du code ce qui pourrais devenir assez lourd a la longue donc j'ai fait une fonction avec une boucle tout marche ou presque.

j'obtiens cette erreur Uncaught TypeError: Cannot read property 'selector'  a la ligne 23

console.log(options[i].selector);

code entier

//objet des différents paramètres
var arr = [{
  name: 'list1',
  selector: '.list .menu',
  triggeredSelector: '.list',
  mode: 'hover',
  reverse: true,
  over: 1,
  out: 6,
  animation: function() {
    tl[i].to(element[i], 1, {height: 'auto'})
    .staggerFrom(element[i].find('.nav'), 0.3, {autoAlpha:0, marginTop:'-50px'}, 0.2)
    .pause();
  }
}];

// la fonction
function TimelineLiteLoop(options) {

  let element = [];
  let tl = [];
  for(var i = 0; i <= options.length; i++) {
    console.log(options[i].selector);

    element[i] = $(options[i].selector).height(0);
    tl[i] = new TimelineLite();

    console.log(element[i]);

    options[i].animation;

    if(options[i].mode === 'hover') {
      $(options[i].triggeredSelector).mouseover(function(e){
        tl[i].timeScale(options[i].over);
        tl[i].play();
      })
      if(options[i].reverse === true) {
        $(options[i].triggeredSelector).mouseout(function(e){
          tl[i].timeScale(options[i].out);
          tl[i].reverse();
        })
      }
    }

  }

};


TimelineLiteLoop(arr);

le plus est étrange c'est que le console.log m'affiche le contenu... preuve de ce que j'avance

et ça me fait pareil avec toutes les autres propriétés, je ne sais que faire :/

merci d'avance

-
Edité par zougui91 30 avril 2018 à 18:37:03

Salut,

Tu utilises <= au lieu de < , donc de 0 à 1 or l'index 1 n'existe pas dans ta tableau arr. Le premier console.log est pour l'index 0 et l'erreur pour le 1.

merci je n'ai plus cette erreur la mais maintenant j'en ai une autre, quand je met ma souris sur les dropdown j'obtiens cette erreur Uncaught TypeError: Cannot read property 'timeScale' of undefined    pour la ligne 34 et quand je fait un console.log(tl[i]); il m'affiche bien l'objet de TimelineLite()

EDIT: quand je fait un console.log(options[i].timeScale()); il m'affiche bien le timeScale par défaut (1) et quand je fais un console.log(options[i].timeScale(6)); il m'affiche bien l'objet complet de TimelineLite() avec le timeScale a 6

    console.log(tl[i].timeScale()); //timeScale par défaut, affiche 1
      tl[i].timeScale(2);
    console.log(tl[i].timeScale()); // affiche 2
      tl[i].timeScale(options[i].over);
    console.log(tl[i].timeScale()); // affiche 1, qui est la valeur de over
      tl[i].timeScale(options[i].out);
    console.log(tl[i].timeScale()); // affiche 6, qui est la valeur de out

EDIT:

j'ai trouvé le problème en faisant un console.log(i); dans les mouseout() et mouseover() il m'affichaient 1 aulieu de 0 ducoup j'ai créé une variable h avec i-1; mais j'aimerai bien savoir pourquoi la valeur de i est a 1 au lieu de 0

-
Edité par zougui91 1 mai 2018 à 16:09:19