[Multiscroll with Splitscreen, 2 columns, position fixed as layers invers]

Hello,

 

i`m trying to create such a a split screen, but with fixed layers and free to extend.

It should be some kind of a "mask"?!

 

The amount of section should be variable, perhaps just 2 or 10.

 

The section itselfs should be fixed in a layer view, and the 2 cols should scroll invers.
Lleft from the bottom to the top, right form top to bottom.

 

In best case, one Section should be fixed after coming in viewport an the other one should have more scrollable content.

 

Does anyone has an idea?

 

Many thanks in advanced.

See the Pen bGEeeBr by GreenSock (@GreenSock) on CodePen

[Infinite Scrolling Cards with GSAP and ScrollTrigger inside div element]

Hi and many thanks for asking. Yes, meanwhile i've got a solution. Thanks a lot.

[Infinite Scrolling Cards with GSAP and ScrollTrigger inside div element]

Hello,

 

i try to implement an infinity loop card slider inside a div in the middle of a page.
First the elements only scrolls by scrolling the body.

 

And after reverse from 0 to 30 the complete section disappears.

--> I've got it no. For everyone who has the same problem, here is my pen <--

 

Many thanks in advanced.

See the Pen NWMxvLL by Mlnto (@Mlnto) on CodePen

[Creating vertical carousel]

Hi, i try to use the same function, but unfortunately the scroll/next/prev actions are always regarding to the body.
If i want to implement it inside div on a page, it always scrolls if the body scroll, and the body jumps up and down, if i click the next or prev button.

Is there a way to reduce this animation only inside a div?

[Verstical Card Slider with Buttons and loop]

Many thanks for your reply, but this doesn`t help. Perhaps someone else has an idea?

 

[Pause animation on hover]

Thanks for your replay. I openend a new Topic:

 

[Verstical Card Slider with Buttons and loop]

Hello,

 

i try to add a previous and next button to the slides.
So far i have this code, which works nearly like it should, but if I the direction is to the top and I click on the "prev" buttons, all the slides jumps over the page to a new direction, and then it works.

Is it possible, to just reverse the function on click and the other way round?

See the Pen mdxaGGz by Mlnto (@Mlnto) on CodePen

[Pause animation on hover]

Hello,

 

i try to add a previous and next button to the slides.
So far i have this code, which works nearly like it should, but if I the direction is to the top and I click on the "prev" buttons, all the slides jumps over the page to a new direction, and then it works.

Is it possible, to just reverse the function on click and the other way round?

 

Here is my current code:

var imgs = gsap.utils.toArray(".slider-item"),
    noImgs = imgs.length,
    next = 2, // time to change
    endless,

    var img00,
        img01,
        img02,
        img03;
        img04;

    var start = 0;
    var switchJump = 0;

    var vars = {};

    
function crossfade(){

  $(imgs).each(function( index ) {
    if (index == 0) { img00 = imgs[0];}
    if (index == 1) { img01 = imgs[1];}
    if (index == 2) { img02 = imgs[2];}
    if (index == 3) { img03 = imgs[3];}
    if (index >= 4) { img04 = imgs[index];}
  });
 
  if (start == 0) {
    var action = gsap.timeline()
    .to(img00, {x:20, y:0, duration:1, opacity: .5})
    .set(img00, {zIndex:1},0.2)
 
    .set(img01, {zIndex:2},0.1)
    .to(img01, {x:60, duration:1, opacity: 1 },0.1)
    .to(img01, {y:100, duration:1 },0.3)
 
    .to(img02, {x:20, y:200, duration:1, opacity:.5},0.1)
 
    .to(img03, {x:0, y:-125, zIndex: 0, duration:1, opacity:0},0)
    .set(img03, {x:20, y:300})
 
    .to(img04, {x:0, y:-125, zIndex: 0, duration:1, opacity:0},0)
    .set(img04, {x:20, y:300})
 
    .to('#card-slider', {autoAlpha:1})

   // imgs.push( imgs.shift());

  } else {
    // REVERSE
    var action = gsap.timeline()
    .to(img00, {x:20, y:200, duration:1, opacity: .5})
    .set(img00, {zIndex:1},0.2)

    .set(img01, {zIndex:2},0.1)
    .to(img01, {x:60, duration:1, opacity: 1 },0.1)
    .to(img01, {y:100, duration:1 },0.3)

    .to(img02, {x:20, y:0, duration:1, opacity:.5},0.1)

    .to(img03, {x:20, y:300, zIndex: 0, duration:1, opacity:0},0)
    .set(img03, {x:0, y:-125})

    .to(img04, {x:20, y:300, zIndex: 0, duration:1, opacity:0},0)
    .set(img04, {x:0, y:-125})
    .to('#card-slider', {autoAlpha:1})
    }

    imgs.push( imgs.shift());
    endless = gsap.delayedCall(next, crossfade);

}

// start the crossfade
endless = gsap.delayedCall(0, crossfade);

// hover =================
var hover = document.querySelector("#card-slider");

$('.nextSlide').click(function() {
    endless.kill();
    start = 0;
    endless = gsap.delayedCall(0, crossfade);
});
$('.prevSlide').click(function() {
    endless.kill();
    start = 1;
    endless = gsap.delayedCall(0, crossfade);
});

hover.addEventListener("mouseenter", function (){
    endless.kill();
});
hover.addEventListener("mouseleave", function (){
    endless = gsap.delayedCall(1, crossfade);
});