Mlnto

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.

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

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.

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?

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

Thanks for your replay. I openend a new Topic:

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?

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); });