Greetings All,
I am a new Greensock user and I absolutely love this code! I have been working on a simple animated mobile website, and I want to include a simple progress bar (not necessarily a slider or scubber) that runs in time with the animation. I have been trying to accomplish this as follows, but it does not work:
<script type="text/javascript">
$(window).load(function() {
var unleash_tl = new TimelineMax({onUpdate:progressBar});
//slideOne
unleash_tl.to("#one", 1, {opacity:1})
.from("#one h1", 1, {top:"-100%", ease:Power4.easeOut}, "-=1.0")
.to("#playBtn", 1, {autoAlpha:1})
.call(function() { unleash_tl.pause(); })
//slideTwo
.to("#one", 1, {opacity:0}, "slideTwo")
.to("#playBtn", 1, {autoAlpha:0}, "-=1")
.to("#two", 1, {opacity:1}, "-=1")
.from("#two h1", 1, {bottom:"-100%", ease:Power4.easeOut})
.to("#two", 1, {opacity:0, delay:2})
//slideThree
.to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5")
.to("#three", 1, {opacity:1}, "slideThree")
.from("#banner-01", 1, {top:"-100%", ease:Power4.easeOut})
.from("#banner-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.75")
.to("#three", 1, {bottom:"-200%", opacity:0, delay:3})
//slideFour
.to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5")
.to("#four", 1, {opacity:1}, "-=1", "slideFour")
.from("#four h1", 1, {top:"-100%", ease:Power4.easeOut})
.from("#four p", 1, {bottom:"-100%", ease:Power4.easeOut})
.from("#four .ocp-logo", 1, {opacity:0})
.to("#four", 1, {opacity:0, delay:7})
//slideFive
.to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5")
.to("#five", 1, {opacity:1}, "slideFive")
.from("#banner-03", 1, {left:"-100%", ease:Power4.easeOut})
.from("#banner-04", 1, {left:"500px", ease:Power4.easeOut}, "-=0.75")
.to("#five", 1, {top:"-100%", opacity:0, delay:3})
//slideSix
.to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5")
.to("#six", 1, {opacity:1}, "-=1", "slideSix")
.from("#six h1", 1, {scale:0, ease:Power4.easeOut})
.from("#six p", 1, {scale:0, ease:Power4.easeOut})
.from("#six .ocp-logo", 1, {opacity:0})
.to("#six", 1, {opacity:0, delay:7})
//slideSeven
.to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5")
.to("#seven", 1, {opacity:1}, "slideSeven")
.from("#window-01", 1, {top:"-100%", ease:Power4.easeOut})
.from("#window-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.75")
.to("#seven", 1, {bottom:"-200%", opacity:0, delay:3})
//slideEight
.to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5")
.to("#eight", 1, {opacity:1}, "-=1", "slideEight")
.from("#eight h1", 1, {top:"-100%", ease:Power4.easeOut})
.from("#eight p", 1, {bottom:"-100%", ease:Power4.easeOut})
.from("#eight .ocp-logo", 1, {opacity:0})
.to("#eight", 1, {opacity:0, delay:7})
//slideNine
.to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5")
.to("#nine", 1, {opacity:1}, "slideNine")
.from("#corporate-01", 1, {left:"-100%", ease:Power4.easeOut})
.to("#nine", 1, {top:"-100%", opacity:0, delay:3})
//slideTen
.to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5")
.to("#ten", 1, {opacity:1}, "-=1", "slideTen")
.from("#ten h1", 1, {scale:0, ease:Power4.easeOut})
.from("#ten p", 1, {scale:0, ease:Power4.easeOut})
.from("#ten .ocp-logo", 1, {opacity:0})
.to("#ten", 1, {opacity:0, delay:7})
//slideEleven
.to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5")
.to("#eleven", 1, {opacity:1}, "slideEleven")
.from("#magazines-01", 1, {top:"-100%", ease:Power4.easeOut})
.to("#eleven", 1, {bottom:"-200%", opacity:0, delay:3})
//slideTwelve
.to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5")
.to("#twelve", 1, {opacity:1}, "-=1", "slideTwelve")
.from("#twelve h1", 1, {top:"-100%", ease:Power4.easeOut})
.from("#twelve p", 1, {bottom:"-100%", ease:Power4.easeOut})
.from("#twelve .ocp-logo", 1, {opacity:0})
.to("#twelve", 1, {opacity:0, delay:7})
//slideThirteen
.to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5")
.to("#thirteen", 1, {opacity:1}, "slideThirteen")
.from("#retail-01", 1, {top:"-100%", ease:Power4.easeOut})
.from("#retail-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5")
.from("#retail-03", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5")
.from("#retail-04", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5")
.to("#thirteen", 1, {top:"-100%", opacity:0, delay:3})
//slideFourteen
.to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5")
.to("#fourteen", 1, {opacity:1}, "-=1", "slideFourteen")
.from("#fourteen h1", 1, {scale:0, ease:Power4.easeOut})
.from("#fourteen p", 1, {scale:0, ease:Power4.easeOut})
.from("#fourteen .ocp-logo", 1, {opacity:0})
.to("#fourteen", 1, {opacity:0, delay:7})
//slideFifteen
.to("#master", 1, {backgroundImage:"none"}, "-=0.5")
.to("#fifteen", 1, {opacity:1})
.from("#fifteen h1", 1, {bottom:"-100%", ease:Power4.easeOut}, "-=1.0")
.to("#fifteen", 1, {opacity:0, delay:7})
//slideSixteen
.to("#sixteen", 1, {opacity:1}, "slideSixteen")
.from("#sixteen h1", 1, {scale:0, ease:Power4.easeOut})
.from("#sixteen p", 1, {scale:0, ease:Power4.easeOut})
.from("#ocp-logo-link", 1, {autoAlpha:0});
unleash_tl.timeScale(1.5);
$("#playBtn").click(function(){
unleash_tl.play("slideTwo");
});
function progressBar(){
$("#progress_bar").scaleX = unleash_tl.currentProgress;
};
});
</script>
Not sure if this is the correct method. Any advice would be grealty appreciated.