Pace and Tweenmax (need help !)

[marco-fischer]

Hello !

I would like to make a text animation with Pace.js The idea is all the 20% one line of text scrolls on my load page.

My animation work without problem... I think I have to use the "Data-progress" but i can't select this element with my script !

I try that : $(".pace-progress[data-progress=’50’]").css('backgroundColor','red');

for my test and other things but doesn't work...

any idea ?

Thx a lot !

[marco-fischer]

Hello,

I found solution...

At pace.js (l.820):

Pace.go = function() { var reclame = document.getElementById("reclame"), pub = document.getElementById("pub"), com = document.getElementById("com"), suite = document.getElementById("suite"), timelineLite = $("#elementexte"), tloading = new TimelineLite();

     tloading.to(reclame,1, {delay:0.5,left:"0%",   opacity:"1"})
        .to(reclame,0.25)
        .to(reclame,1,  {delay:0.5, left:"-30%",    opacity:"0"})
        .to(pub,    1,  {delay:0.5, left:"0%",      opacity:"1"})
        .to(pub,    0.25)
        .to(pub,    1,  {delay:0.5, left:"-30%",    opacity:"0"})
        .to(com,    1,  {delay:0.5, left:"0%",      opacity:"1"})
        .to(com,    0.25)
        .to(com,    1,  {delay:0.5, left:"-30%",    opacity:"0"})
        .to(suite,  1,  {delay:0.5, left:"0%",      opacity:"1"})
        .to(suite,  0.25);

Pace.running = true;

That's for the animation when the website load.

When it's loaded :

At pace.js (l.873):

return setTimeout(function() {

        var suite = document.getElementById("suite"),
        timelineLite = $("#elementexte"),
        tloading = new TimelineLite();

     tloading.to(suite,     1,  {delay:0.5, left:"-30%",    opacity:"0"});

        var hide = document.getElementById("hide"),
         fleche = document.getElementById("fleche"),
         scroll = document.getElementById("scroll"),
         timelineLite = $("#elementexte"),
         tload = new TimelineLite();

      tload.to(logobig, 2, {opacity:"1"})
        .to(hide, 2, {opacity:"1"})
        .to(fleche, 2, {opacity:"1"})
        .to(scroll, 2, {opacity:"1"});
      bar.finish();

That's for the end of the animation when pace.js is end. I had a ghost time in the parameter and... it's work very well !

I hope it's useful for someone else !

(So it's close, but i don't know how to close a topic...)