Jump to content
Search Community

dadariga

Members

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by dadariga

    Want horzontal sliders and on every slider page should be a animation triggered by scrolling

    in GSAP

    Posted

    Hello,

     

    Im searching the Internet for a few weeks and cant find a solution. I can make an horizontal slider and i can build animations on scroll, but not both on the same time. i want that the horizontal scrolling between the sliders is possible after all scroll animations are done. Dont worry the Implementations are done.

     

     

     

    <!DOCTYPE html>
    <Head>
        <title>Problem</title>
        <style type="text/css">
            .slide{
            width: 100vw;
            height: 100vh;
        }
        .wrapper{
            display: flex;
            flex-direction: row;
            width: 400vw;
            transform: rotate(90deg) translateY(-100vh);
            transform-origin: top left;
        }
        .outer-wrapper{
            width: 100vh;
            height: 100vw;
            transform: rotate(-90deg) translateX(-100vh);
            transform-origin: top left;
            overflow-y: scroll;
            overflow-x: hidden;
            position: absolute;
            scrollbar-width: none;
           -ms-overflow-style: none;
        }
        </style>
    </Head>
     
    <Body>
        <div class="outer-wrapper">
            <div class="wrapper">
                <div class="slide one"></div>
                <div class="slide two"></div>
                <div class="slide three"></div>
                <div class="slide four"></div>
            </div>
        </div>
     
    <script>
     
        //the classes are not important. i just used Tweenmax for scrolling
        $(document).ready(function(){
     
    var tween = TweenMax.to('.vonoben2', 2, {bezier: flightPath, ease: Power2.in, opacity: 1, })
                TweenMax.to('.central', 2, {bezier: ueberschrift, ease: Power2.in, opacity: 1, })
    var scene = new ScrollMagic.Scene({triggerElement: '.vonoben2', duration:'30%', reverse: false })
    .addIndicators({name: "finds raus",})
    .setTween(tween)
    .addTo(controller);


     
    var timeline = new TimelineMax();
     
    var tween1 = TweenMax.to('.strand', 2, { ease: "Power2.in", opacity: 1, });
    var tween2 = TweenMax.to('.welle', 2, { ease: "elastic", opacity: 1, stagger: 0.2 });
    var tween3 = TweenMax.to('.haus', 2, {bezier: haus, ease: "back", opacity: 1, });
    var tween4 = TweenMax.to('.mensch', 2, {bezier: mensch, ease: Power2.in, opacity: 1,  });
    var tween5 = TweenMax.to('.schildkroete', 2, {bezier: schildkroete3, ease: Power2.in, opacity: 1, });
    var tween6 = TweenMax.to('.pflanzen', 2, {bezier: pflanzen, ease: Power2.in, opacity: 1, });
    var tween7 = TweenMax.to('.strand', 1, {xPercent: -10}, );
    var tween8 = TweenMax.to('.schildkroete', 1, {yPercent: 600, rotation:20, transformOrigin:"left 50%",},0);
    //var tween9 = TweenMax.to('.setup1', 3, {yPercent: 0, xPercent: -110,rotation:0, opacity: 0});
     
    timeline.add(tween1).add(tween2).add(tween3).add(tween4).add(tween5).add(tween6).add(tween7).add(tween8);
     
    var scene2 = new ScrollMagic.Scene({triggerElement: '.viewport', triggerHook: 0, duration:'5000', reverse:true })
    .addIndicators({name: "setup1"})
    .setClassToggle('.viewport', '.viewport2') //adds class zap
    .addTo(controller)
    .setPin('.viewport')
    .setTween(timeline)
     
    //Seite 2 Strand nach rechts
    var tween20 = TweenMax.to('.schiff', 20, {bezier: schiff,ease:Power2.in, opacity: 1, });
    var tween21 = TweenMax.to('.strand2', 20, {bezier: strand2,ease:Power2.in, opacity: 1, });
     
    timeline.add(tween20).add(tween21);
    var scene3 = new ScrollMagic.Scene({triggerElement: '.viewport2', triggerHook: 0,  reverse: true })
    .addIndicators({name: "setup2"})
    .addTo(controller)
    .setPin('.viewport2')
    .setTween(timeline2)
      });
    </script>
    </Body>

    newhtml.html

×
×
  • Create New...