Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

ronnieb

Members
  • Posts

    4
  • Joined

  • Last visited

Posts posted by ronnieb

  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

    • Like 1
  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.

×