Animating one div after another.

[goco17]

Hi, john

First of all great plugin,

I could really use some explanation here,

I have a button, whereby after clicking it, i want a series of animation to play in a reverse order(works) then fires another group of animation.

using: asp.net, jquery, superscrollorama

jquery

   controller.addTween($('#boldWomen'), (timeline_bold)
             .append([
                  TweenMax.from($('#watercolour01'), 1.5, { css: { opacity: 0, scale: 0.1 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, }, ease: Quad.easeInOut }),
                  TweenMax.from($('#watercolour02'), 1.5, { delay: 0.3, css: { opacity: 0, scale: 0.1 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, }, ease: Quad.easeInOut }),
                  TweenMax.from($('#watercolour03'), 1.0, { delay: 1.5, css: { opacity: 0, scale: 2 }, onReverseComplete:animateGlam, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, scale: 1 }, ease: Quad.easeInOut }),

                  TweenMax.from($('#model-bold'), 1.5, { delay: 1.0, css: { opacity: 0 }, immediateRender: true, ease: Quad.easeInOut }, { css: { opacity: 1 }, ease: Quad.easeInOut }),
                  TweenMax.from($('#card-bold'), 1.0, { delay: 1.0, css: { opacity: 1, left: "-650px" }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1 }, ease: Quad.easeInOut }),

                  TweenMax.from($('#text-bold'), 1.0, { delay: 1.5, css: { opacity: 0 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1 }, ease: Quad.easeInOut })
             ])

        );

        function animateGlam() {
            controller.addTween($('#glamWomen'), (timeline_glam)
                     .append([
                          TweenMax.from($('#watercolour01'), 1.5, { css: { opacity: 0, scale: 0.1 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, }, ease: Quad.easeInOut }),
                          TweenMax.from($('#watercolour02'), 1.5, { delay: 0.3, css: { opacity: 0, scale: 0.1 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, }, ease: Quad.easeInOut }),
                          TweenMax.from($('#watercolour03'), 1.0, { delay: 1.5, css: { opacity: 0, scale: 2 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, scale: 1 }, ease: Quad.easeInOut }),
                          TweenMax.from($('#model-glam'), 1.5, { delay: 1.0, css: { opacity: 0 }, immediateRender: true, ease: Quad.easeInOut }, { css: { opacity: 1 }, ease: Quad.easeInOut }),
                          TweenMax.from($('#card-glam'), 1.0, { delay: 1.0, css: { opacity: 0, bottom: "-600px" }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1, }, ease: Quad.easeInOut }),
                          TweenMax.from($('#text-glam'), 1.0, { delay: 1.5, css: { opacity: 0 }, immediateRender: true, ease: Quad.easeOut }, { css: { opacity: 1 }, ease: Quad.easeInOut })
                     ])

                );
        }

        $('#btn-down-bold').click(function () {
            timeline_bold.reverse();
        });

my html

<div class="content">
    <div id="boldWomen" >
        <div id="imgBold">
            <img class="img" src="library/images/watercolour01.png" alt="" id="watercolour01" style="position:absolute;left:450px;top:50px"/>
            <img class="img" src="library/images/watercolour02.png" alt="" id="watercolour02" style="position:absolute;top:100px;left:450px" />   
            <img class="img" src="library/images/watercolour03.png" alt="" id="watercolour03" style="position:absolute" />
            <img class="img" src="library/images/model-bold.png"  alt="" id="model-bold"  style="position:absolute" />
            <img class="img" src="library/images/card-bold.png"  alt="" id="card-bold"  style="position:absolute" />
        </div>

        <div id="text-bold" >
                <h1>For the bold-hearted</h1>    
                <p>Style up in BOLD fashion with our daring selection of shoes and bags to match your clothing as well as accessories by being rewarded with characterised points!</p>
                <div id="btn-bold" style="margin-top:20px;"></div>
                <div id="btn-down-bold" style="margin-top:20px;padding-left:150px"><img id="bold-click" src="library/images/pointer/btn-down-bold.png" alt="" /></div>
            </div>
    </div>      

  <div id="glamWomen">
        <div id="imgGlam">
            <img class="img" src="library/images/card-glam.png"  alt="" id="card-glam"  style="position:absolute" />
            <img class="img" src="library/images/model-glam.png"  alt="" id="model-glam"  style="position:absolute" />

        </div>

        <div id="text-glam" >
                <div id="btn-up-glam" style="margin-top:30px;padding-left:150px"><img id="Img1" src="library/images/pointer/btn-up-glam.png" alt="" /></div>    
                <h1>The GLAM personality</h1>    
                <p>Classy, sophisticated and glamorous... Characterise your day with high-fashion limited edition shoes and bags that you can get hold of the brillian redeems!</p>   
                <div id="btn-glam" style="margin-top:20px;"></div>
                <div id="btn-down-glam" style="margin-top:30px;padding-left:150px"><img id="Img6" src="library/images/pointer/btn-down-glam.png" alt="" /></div>
            </div>
    </div>  
  </div>

how do i do this, extremely sorry for troubling you

[janpaepke]

Hi Goco,

Actually this will not work using timeline.reverse(), as superscrollorama will control all animations for as long as they are added. But please try to make more clear how the site should work. So far what I think you want to achieve is this:

Scroll down and fire an animation, when reaching a certain scroll point. When clicking a button the animation should be reversed.

What about when I scroll back up then? Should the animation run forward again? Or should it just not be running anymore?

regards, Jan

[goco17]

Hi, sorry for the late reply as I was away.

It's something like this http://www.lordandtaylorfirstlook.com/

My intention is this:

• The first page loads(without animation)
• To go to the second page, the first page must reverse it's animation, then fires the 2nd page animation..

Is this possible??

[jkrot]

I think it is possible, you are going to have to adjust your animations mid animation so fire an onComplete for the animation once it is done so and force it to do something else. It is going to be really tricky but I think it is doable.

[goco17]

@jkrot yes, thank u soo much...i'll use the onComplete and onReverseComplete...:)