[TweenMax TweenLite Starting Position]

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

[TweenMax TweenLite Starting Position]

No ideas of what is happening to my page?

[TweenMax TweenLite Starting Position]

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

[Superscrollorama, stop page scroll while animating a section]

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>