Jump to content
GreenSock

ronnieb

Members
  • Posts

    4
  • Joined

  • Last visited

Reputation

1 Newbie

Profile Information

  • Gender
    Male
  • Location
    Calgary, Canada
  1. Thank you, gentlemen. This is exactly what I am looking for! I appreciate your taking the time to address this issue so thoroughly. This forum is such a great learning resource. Regards, Ron
  2. Greetings all, I am working on a site which includes simple "next" and "previous" buttons to navigate using "scrollTo". I have successfully configured scrollTo to navigate to multiple anchor elements moving forward (i.e. "#myDiv1, #myDiv2, etc.") using the "next" button, but I was wondering if it is possible to scroll back to the previous anchor using just the "previous" button (I don't want to scroll back to the beginning). I hope this is clear enough. Any advice would be greatly appreciated. Cheers, Ron P.S. Greensock rocks! I've only been using it for a short while, but even as a newbie I've been able to exceed my clients' expecations.
  3. Carl & Rodrigo, Excellent solutions. Many thanks to both of you for your prompt attention and thorough explanations. I'm very much looking forward to exploring the possibilities of GSAP! Cheers, Ron
  4. 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.
×