Conflit : GSAP et CALL

Clement7
Javascript

Bonjour à tous !
Aujourd'hui même, j'ai regardé le tuto sur GSAP sur ce site, et ça m'a intéressé, du coup j'ai voulu créé une petite animation JS avec GSAP.
Problème, j'ai besoin d'utiliser le système de timeline avec un slider (je synchronise le slider à la timeline), ce qui fait que je dois mettre toutes mes commandes GSAP à la suite.
A certains moments, j'ai besoin de modifier le contenu HTML de ma div. Comme je ne dois utiliser que des commandes GSAP à la suite, j'ai trouvé la solution d'utiliser l'instruction call, qui me permet donc d'utiliser une fonction pour modifier le contenu HTML -> Mais si JAMAIS je touche à la div, plus rien ne s'affiche !

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>GSAP</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/anims.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
</head>
<body> 
    <div align="center">
        <div id="film"><div align="center" class="anim1"><h1>Color World</h1><h2>Réalisé par Clément.7</h2><h3>Powered by <a href="http://greensock.com/gsap">GSAP JS</a></h3></div></div>
        <div id="track">
            <div id="play"></div> <div id="progress"></div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/TweenMax.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

anims = {
    1: '<div align="center" class="anim1"><h1>Color World</h1><h2>Réalisé par Clément.7</h2><h3>Powered by <a href="http://greensock.com/gsap">GSAP JS</a></h3></div>'
}
function anim(n) {
    document.getElementById('film').innerHTML = anims[n];
}
var tl = new TimelineLite({pause: false, onUpdate:function() {
    $('#progress').slider('value', tl.progress() * 100);
}});
var film = $('#film');
$('#progress').slider({
    range: false,
    min: 0,
    max: 100,
    step: .1,
    slide: function(event, ui) {
        tl.progress(ui.value / 100).pause();
    }
});
$('#play').click(function() {
    if($(this).html() == '?') {
        $(this).html('||');
        tl.play();
    } else {
        $(this).html('?');
        tl.pause();
    }
}).trigger('click');

tl.call(function() {
        document.getElementById('film').innerHTML = anims[1]
    }, ])
    .to(film, 2, {backgroundColor: '#000000'})
    .staggerTo([document.getElementsByTagName('h1')[0], document.getElementsByTagName('h2')[0]], 2.5, {opacity: 1}, 1)
    .to(document.getElementsByTagName('h3')[0], 1, {rotationX: '+=360', opacity: 1})
    .to(film, 2, {backgroundColor: '#FFFFFF'})

body {
    background-color: #B7FFAE;
}
#film {
    text-align: left;
    background-color: white;
    border-radius: 5px;
    padding: 5px;
    width: 600px;
    height: 300px;
}
#track {
    border: 1px solid gray;
    padding: 5px;
    margin-top: 10px;
    width: 600px;
}
#play, #progress {
    display: inline-block;
}
#play {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 5px;
}
#play:hover {
    cursor: pointer;
}
#progress {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: -3px;
    width: 550px;
}
.anim1 h1, h2, h3 {
    display: relative;
    color: white;
    opacity: 0;
}
.anim1 h1 {
    margin-top: 50px;
}
.anim1 h2 {
    margin-top: 75px;
}
.anim1 h3 {
    color: #00F92C;
    margin-top: 65px;
}

Voilà tous mes fichiers HTML CSS JS. Maintenant, j'expose le problème en entier :

  • Lorsque je n'utilise pas call() ou que la fonction passé en paramètre ne touche pas à la div, tout fonctionne
  • Lorsque je passe en paramètre à la fonction call() une fonction qui modifier le contenu HTML de la div, même si j'utilise une fonction anonyme, l'opacité des éléments HTML qui était à 0 au départ reste à 0, mais le div en lui-même s'éclaircit bel et bien à la fin.

Que faire ? Je ne trouve pas de solution.
Quelqu'un saurait où se situe le problème ?
Merci beaucoup d'avance !

2 réponses

Clement7
Auteur
Réponse acceptée

Sujet résolu !
C'est juste que l'accès au DOM perturbe GSAP (Tween, en l'occurrence), ce qui fait que l'accès au DOM est impossible pendant la vidéo.
Heureusement, vu que je voulais implémenter plusieurs scènes les unes après les autres, j'ai trouvé une solution : on mets chaque scène dans un div d'id="scene_xxx" et class="scene" ou xxx est un numéro à partir de 1 (la scène 0 est vide)
Avant de lancer GSAP, on cache tous les divs avec un petit jQuery('.scene').hide() pour ne pas gêner l'utilisateur.
Ensuite, pour passer d'une scène à la suivante :

tl.to(jQuery('#scene_' + actual.toString()), 0, {opacity: 0});
tl.to(jQuery('#scene_' + (actual + 1).toString(), 0, {opacity: 1});

Voilà !

Clement7
Auteur

Allez ! J'vais pas vous manger (quoique... ;)) !