ronnieb
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ronnieb
-
-
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.
-
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
-
1
-
-
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.
ScrollTo: Next and Previous
in GSAP
Posted
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