Jump to content
Search Community

dadariga

Members

  • Posts

    1

  • Joined

  • Last visited

dadariga's Achievements

0

Reputation

  1. dadariga
    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...