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

dadariga · May 26, 2020

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>

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

//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

ZachSaucier · May 26, 2020

Hey dadariga and welcome to the GreenSock forums!

GreenSock is currently developing its own scroll plugin that will make this sort of thing much easier. I think you're going to love it!

Notifications

Messages

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

Recommended Posts

dadariga

Link to comment

Share on other sites

ZachSaucier

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members