techiesplus13

Rodrigo! Thank you very much! It solved all the problems! Cheers! Keep it up! http://techiesplus.com

No ideas of what is happening to my page?

How can i make my elements go back to their starting position? I have a TweenMax Animation inside a scrollorama pin it, but after the animation starts if i stop the animation by upinit i will get a horizontal scroll bar and i think is beacuse of the positions of my elements that never came back to there original position. Please have a look at it on http://techiesplus.com

hey you can do it with the superscrollorama PIN IT! Check our new website that's what we are building! http://techiesplus.com You just scroll down to the div where the animation will be displayed, as soon as the top of the div get to the top of the browser it will pin it making its position fixed and its width and height can be 100% so that the animation will cover the browser completely. Here is an example using superscrollorama, TweenMax and TimelineLite It still is work in progress! <script type="text/javascript"> $(document).ready(function () { var controller = $.superscrollorama({ playoutAnimations: false, triggerAtCenter: true }); //controller.addTween('#fly-it', TweenMax.from($('#fly-it'), .25, { css: { right: '1000px' }, ease: Quad.easeInOut })); //controller.addTween('#fade-it', TweenMax.from($('#fade-it'), .5, { css: { opacity: 0 } })); //controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); //controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut})); //controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing var pinDur = 1000; var pinAnimations = new TimelineLite(); var timeline = new TimelineLite(); controller.pin($('#howitworks'), pinDur, { anim: pinAnimations, onPin: function () { $('#howitworks').css('height', '100%'); timeline.progress(0); timeline.stop(); timeline.append(new TweenMax.fromTo($('#techiesscroll'), 0, { css: { opacity: 1 } }, { css: { opacity: 0 } })); timeline.append(new TweenMax.fromTo($('#techiesstop'), 1, { css: { opacity: 0 } }, { css: { opacity: 1 } })); timeline.append(new TweenMax.fromTo($('#techiesstop'), 2, { css: { opacity: 1 } }, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#cloudback'), 2, { css: { opacity: 1 } })); timeline.append(new TweenMax.fromTo($('#cloudfront'), 2, { css: { opacity: 0 } }, { css: { opacity: 1 } }), -1); timeline.append(new TweenMax.to($('#techie'), 2, { css: { opacity: 1 } })), -3; //timeline.append(new TweenMax.from($('#techie'), 2, { css: { right: '1000px' }, ease: Quad.easeInOut, delay: 2 })); timeline.append(new TweenMax.to($('#fly-it'), 0, { css: { opacity: 1 } }), -1); timeline.append(new TweenMax.from($('#fly-it'), 1, { css: { right: '2000px' }, ease: Quad.easeInOut })); timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#simple'), 0, { css: { opacity: 1 } }), -1); timeline.append(new TweenMax.from($('#simple'), 1, { css: { left: '2000px' }, ease: Quad.easeInOut }), -1); timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#secure'), 0, { css: { opacity: 1 } }), -2); timeline.append(new TweenMax.from($('#secure'), 1, { css: { right: '2000px' }, ease: Quad.easeInOut }), -2); timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } })); //timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 1 } })); //timeline.append(new TweenMax.to($('#questionmark1'), .5, { css: { opacity: 0 } })); //timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 1 } })); //timeline.append(new TweenMax.to($('#questionmark2'), .5, { css: { opacity: 0 } })); //timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 1 } })); //timeline.append(new TweenMax.to($('#questionmark3'), .5, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#fly-it'), 1, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#questionmark1'), 1, { css: { opacity: 0 } }), -1); timeline.append(new TweenMax.to($('#questionmark2'), 1, { css: { opacity: 0 } }), -1); timeline.append(new TweenMax.to($('#questionmark3'), 1, { css: { opacity: 0 } }), -1); timeline.append(new TweenMax.to($('#simple'), 1, { css: { opacity: 0 } }), -1); timeline.append(new TweenMax.to($('#secure'), 1, { css: { opacity: 0 } }), -1); //Step 1 timeline.append(new TweenMax.to($('#bigone'), 0, { css: { opacity: 1 } })); timeline.append(new TweenMax.from($('#bigone'), 2, { css: { left: '2000px' }, ease: Quad.easeInOut })); timeline.append(new TweenMax.to($('#subscribe'), 0, { css: { opacity: 1 } })); timeline.append(new TweenMax.from($('#subscribe'), 2, { css: { left: '2000px' }, ease: Quad.easeInOut })); timeline.append(new TweenMax.to($('#ByPhone'), 0, { css: { opacity: 1 } })); timeline.append(new TweenMax.from($('#ByPhone'), 2, { css: { left: '2000px' }, ease: Quad.easeInOut })); timeline.append(new TweenMax.to($('#Phone'), 2, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#OrOnline'), 0, { css: { opacity: 1 } })); timeline.append(new TweenMax.from($('#OrOnline'), 2, { css: { right: '2000px' }, ease: Quad.easeInOut })); timeline.append(new TweenMax.to($('#Online'), 2, { css: { opacity: 1 } })); timeline.append(new TweenMax.to($('#bigone'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#subscribe'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#ByPhone'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#Phone'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#OrOnline'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#Online'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#cloudfront'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#cloudback'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.to($('#techie'), 2, { css: { opacity: 0 } })); timeline.append(new TweenMax.fromTo($('#techiesscroll'), 2, { css: { opacity: 0 } }, { css: { opacity: 1 } })); timeline.timeScale(1); //; //sets timeScale to half-speed timeline.progress(0); timeline.play(); }, onUnpin: function () { $('#howitworks').css('height', '600px'); timeline.progress(0); timeline.stop(); TweenMax.to($('#techiesscroll'), 0, { css: { opacity: 1 } }); //timeline.reversed(true); //timeline.reverse(); TweenMax.to($('#cloudfront'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#cloudback'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#techie'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#fly-it'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#questionmark1'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#questionmark2'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#questionmark3'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#simple'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#secure'), 1, { css: { opacity: 0 }, delay: 0 }); TweenMax.to($('#bigone'), 2, { css: { opacity: 0 } }); TweenMax.to($('#subscribe'), 2, { css: { opacity: 0 } }); TweenMax.to($('#ByPhone'), 2, { css: { opacity: 0 } }); TweenMax.to($('#Phone'), 2, { css: { opacity: 0 } }); TweenMax.to($('#OrOnline'), 2, { css: { opacity: 0 } }); TweenMax.to($('#Online'), 2, { css: { opacity: 0 } }); } }); }); </script>