GSAP doesn't animatie with Mustache?

[jiggy1965]

I'm working on a Product DCO banner I would like to animate further. The content of a feed is loaded into the banner through a Mustache script. I noticed that I can't animate that content Mustache generates when using GSAP. Probably because it can't 'see' the objects I'm trying to animate. Cause that content isn't there when I go to 'source code'. That content is loaded through the Mustache script and not embedded directly inside the html source code. With css3 animations however I CAN animate that Mustache generated content.

 

Is that normal? That I can't animate Mustache generated content with GSAP/js, but can animate the same content with CSS? With GSAP I can only animate the html that is there to see in the source code. Like the container div in which the content generated by Mustache would be virtually placed. While with CSS I can generated that content even when it isn't viewable when going to the html source code.

 

 

[PointC]

Hi @jiggy1965

 

Are you using any sort of load event handler? I'm wondering if the tweens are firing before the content is ready. I'm not familiar with mustache.js, but I found a couple CodePen demos that use it and tried tweening the elements and it worked fine.

 

Could you create a CodePen demo to show the behavior?

When you set up a demo, you won't find mustache.js in the JS drop-down, but if you just start typing the name, it is available on CodePen.

 

Thanks and happy tweening.

[jiggy1965]

I've created a small example to demonstrate:

See the Pen oGNGLm by anon (@anon) on CodePen

The text which is generated by Mustace is animating, but that animating is done through css.

If you delete this part:

@keyframes example {
    from {top:300px;}
    to {top:0px;}
}
.animate {
    animation-name: example;
    animation-duration: 4s;
}

 

Than the GSAP animation does nothing.

It's like CSS does recognize the 'animate' class that Mustache about to generate and can target it to animate, but GSAP doesn't see 'animate' just yet and won't see it because Mustache isn't literally putting that generated code in the source code

 

[PointC]

Seems fine to me.

See the Pen OxJxQX by PointC (@PointC) on CodePen

Your pen wasn't loading the current GSAP. 

 

Happy tweening. 

[PointC]

The tween was also being created before the content was ready because you had the tween in the HTML panel while all the mustache related fun was down in the JS panel. You'll see that I moved the tween down there too and it all works fine.

 

Happy tweening.

[jiggy1965]

Well usually I put this in the bottom of the html file:

 

<!-- load TeenMax here -->
<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>

 

To load the tweenMax library.

 

And in a seperate js/main.js file I put the animation code like this:

 

// start animation
tl = new TimelineMax();
tl.from('.logo', .75, {opacity:0, top:-100, ease:Back.easeOut.config(4)}, "start");

 

And that always works. 

 

But you're saying that it's best to put that last code, the animation, between a window.onload = function() ?

[PointC]

Oh, you can certainly put that tween/timeline in your main.js file - no problem. You just want to generate the content with mustache.js before you create the tween. I also mentioned an outdated TweenMax because the version you're using is from 2015. Your animation will actually work with that version, but it's usually best to use the most recent version. Currently 1.20.2.

 

Happy tweening.

[jiggy1965]

Ok, so better from now on to put any tween code between something like:

 

$( document ).ready(function() {
   // tween code
});

 

(or windows.onload)

 

Forgot about that one because 9 out of 10 times it will work without, but I can understand that it would take a while for mustache to generate the content and that the tween code would have run before it. I often forget out that cause in most tutorials it often isn't written out. But will remember from now on. Thanks

[jiggy1965]

Could you perhaps have a look into my file? I'm trying to animate the logo a bit, but it still doesn't. And I've put the code between $( document ).ready(function() now and I used the most recent GSAP. The logo is generated through Mustache.  Why won't the logo still not animate?

 

https://we.tl/qJtrfU2APh

[Carl]

I don't know anything about mustache, but it appears that document.ready() is not sufficient as mustache still hasn't done its thing.

I waited a second after ready() and it worked fine. Try this in your main.js

jQuery( document ).ready(function(){
    TweenLite.delayedCall(1, runAnimation)
    
})
function runAnimation(){
    var tl = new TimelineMax();
    tl.to(".logo_efteling", 1, {rotation:360});
}

 

So just like PointC mentioned earlier, you just need to make sure the elements are available before you create your animation.

My suggestion is to hunt around the mustache docs / community to find out how to know when mustache is done doing what it does.

[PointC]

I was going to post the same answer as @Carl, but I'm too slow. I tried a delayedCall as well and it worked fine for me too. I wonder if mustache has some sort of callback when it has done its work? You'd think it would, but I have no idea. Good luck with the hunt though.

 

Hopefully this info helps. Happy tweening.

[jiggy1965]

Thanks for the update. I already found where to put the code in my file. I just added the animation part as the last lines of the mustache generating code:

 

        productsInstance.on('itemShow', function(node, data) {
            node.innerHTML = dhtml.mustache('item', {
                products: data,
                custom_price: (parseFloat(data[0]['product_price'])).toFixed(0),
                target: dhtml.getVar('landingPageTarget', '_blank')
            });
            tl = new TimelineMax();
            tl.to('.logo_efteling', 4, {top: 200, ease: Back.easeOut.config(4) }, "start+=1");
        });

That function generated the code and any code after that would be executed. As far I could see there isn't a mustache 'unready' and it just runs like html synchronous. So I've got that figured out. One thing strange though: when using tl.to and tl.fromTo in above added lines it animates, but when using tl.from it doesn't .

 

The same code but with tl.from like below doesn't work:

       productsInstance.on('itemShow', function(node, data) {
            node.innerHTML = dhtml.mustache('item', {
                products: data,
                custom_price: (parseFloat(data[0]['product_price'])).toFixed(0),
                target: dhtml.getVar('landingPageTarget', '_blank')
            });
            tl = new TimelineMax();
            tl.from('.logo_efteling', 4, {top: 100, ease: Back.easeOut.config(4) }, "start+=1");
        });

 

the logo just stays static. Can anyone give an explanation for that? What can it be that doesn't like the tl.from? Is it the html, css, js or mustache?

[jiggy1965]

I you check out the update version for example:

new example

This now works as in the js file I've added that animation part as a function inside the mustache generating code below so it runs when that generating part is done.

 

But if you change:

    tl.to('.logo_efteling', .75, { top: -33, ease: Back.easeOut.config(4) }, "+=1");
 

into this:

    tl.from('.logo_efteling', .75, { top: 50, ease: Back.easeOut.config(4) }, "+=1");
 

The logo just stays static. For some reason something doesn't like 'to.from'. Can't explain that...

[PointC]

Sounds like you may want to set immediateRender to false. From the docs:

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins (often the desired behavior when inserting into TimelineLite or TimelineMax instances).

 

More info:

https://greensock.com/docs/TweenMax/static.from()

 

Hopefully that helps. Happy tweening.

[jiggy1965]

Thanks. I tried that in above file:

 

function runAnimation() {
    var tl = new TimelineMax();
    tl.from('.logo_efteling', 4, { top:"100px", ease: Back.easeOut.config(4), immediateRender:false  }, "+=1");
}

 

That works in that it doesn't really stay static (while it moves with tl.to). But what it does then is first show the logo in its top position and immediately after that the 100px position. Like it move in 4 seconds from frame 1 immediately to frame 2, without the appearance of moving/tweening. Also tried fromTo and than it more or less moves again, but with a weird shaking effect when it starts moving.

 

Perhaps still some Mustache generating problem?

[PointC]

That would be my guess too, but with no knowledge of mustache, I'm not really sure what to advise. I wish I could be of more help. If you experience more GSAP related problems, we're here to help.

 

Happy tweening.

[Carl]

Remember, a from() tween sets the start position only when the javascript executes. So if you are delaying your javascript from running it is perfectly normal for your asset to appear in its "pre-animated" state BEFORE the javascript executes. You may want to use your css to hide everything in your banner with visibility:hidden and then reveal it all via javascript when the js executes. 

 

Like PointC said, we really can't get to deep into mustache around here. If you need more GSAP help, please provide a very simple CodePen demo. It is inefficient for us to be downloading files, pasting code, testing, etc especially when tools like CodePen, jsFiddle, plunkr, etc. are freely available and cut down support time by huge margins and provide easy ways for us to show and everyone else working solutions. If you can clearly illustrate a GSAP animation doing odd shaking or jumping we would certainly love to see it and help fix it. Thanks!