[Horizontal scrolling with variable-size content]

I finally solved my problem on my own.

 

Thanks anyway.

Have a nice day!

[Horizontal scrolling with variable-size content]

Hi all,

 

I'm trying to make a horizontal scroll with blocks of fluctuating sizes.

The content of my blocks can protrude when responsive, which is why I scroll horizontally then vertically, but since the blocks aren't one screen width wide I'm forced to cheat. 

Depending on the height of each of my blocks, I increase the width of my container, then when I scroll over my blocks with the overhanging content, I trigger an upward animation and a margin on the left to simulate a vertical scroll.
 

My main problem is that my animations on blocks with protruding content are triggered at the start of my horizontal scroll and not when I arrive at my block.

When I activate my markers, they are not at the bottom of the screen as in these examples : 

See the Pen gOjZKOO by designcourse (@designcourse) on CodePen

 

 

 

My code :

 

const container = document.querySelector(".__container");
const sections = gsap.utils.toArray(".__section");
const screenHeight = window.innerHeight;
let spaceTotal = 0;

sections.forEach(section => {
    let drag = section.querySelectorAll(".__drag");
    if(section.offsetHeight < screenHeight || drag.length === 0)  return

    let space = section.offsetHeight - screenHeight;
    spaceTotal = spaceTotal + space;
    
    gsap.to(drag,{
        y: "-"+space,
        marginLeft:space,
        scrollTrigger: {
            trigger: section,
            containerAnimation: scrollTween,
            start: 'left center',
            scrub: 1,
            markers: true,
        }
    });
});

function getScrollAmount() {
    let containerWidth = container.scrollWidth + spaceTotal;
    return -(containerWidth - window.innerWidth);
}

const scrollTween = gsap.to(sections, {
    x: getScrollAmount,
    duration: 3,
    ease: "none",
});

ScrollTrigger.create({
    trigger:".__container",
    end: () => `+=${getScrollAmount() * -1}`,
    pin:true,
    animation:scrollTween,
    scrub:1,
    invalidateOnRefresh:true,
})

 

J'espère avoir été le plus clair possible.

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

[odd(bug/glitch?) pixel line when using loco scroll and scroll trigger]

Hi,

 

I have this exact issue in my website using ScrollSmoother alone, on Chrome. All blocks with backgrounds create a weird 1px glitch on scroll and the negative margin does not fix this for me. Is there any other way to deal with that ?

[wiggle path of SVG]

So i reset the file to your previous answer, I have a little gap but  it's ok (the mouse are inside the svg for firefox and chrome).

 

Thank you again for your help !

[wiggle path of SVG]

Nothing, I have updated (little clean) my Pen :

See the Pen abWavee by Pratrax (@Pratrax) on CodePen

 

[wiggle path of SVG]

It does not work on my computer ... I use Brave(V1.27.109)  and firefox (v90).

Codepen works on Brave but not Firefox now :'(

 

Thank you

[wiggle path of SVG]

I have another question, in fact, all it's ok for Firefox, because it put transform : translate, or chrome use matrix and I have an offset.

I try force3d without success.

I edited my codepen :

See the Pen abWavee by Pratrax (@Pratrax) on CodePen

 

Best regards

[wiggle path of SVG]

32 minutes ago, OSUblake said:

You're recreating the blob on every mouse move. Not good. You should probably just move the entire container.

 

I just updated my demo for v3.

 

 

See the Pen

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

by GreenSock (@GreenSock) on CodePen

 

 

Thank you so much ! It perfectly works !

[wiggle path of SVG]

Yes, I edit my post, so the wiggle it's just to ugly... 

[wiggle path of SVG]

Hello everyone,

Sorry for dig up the post, I try to move with clientX and clientY you're blue wiggle, without any success ... How is that possible to move it ?

 

Thank you for your futur reply

 

Best regards

 

See the Pen abWavee by Pratrax (@Pratrax) on CodePen

[Magnetic button in better format]

Hey Zach !

Thank you for your answer, it's ok to convert to Gsap3 but can the code be optimised with gsap only (no js math)?

 

Best regards Zach

[Magnetic button in better format]

Hello,
I am asking for your help because I found this codepen on the internet.

The code works but I would like to know if there is another method using jQuery and Gsap (not TweenMax).

 

PS: I only want the effect on the text with the mouse

 

Thank you for your help.

 

Best regards

See the Pen bxmLYm by riogrande (@riogrande) on CodePen

[Bug resize window]

hey Zach, you are very fast!
Thanks a lot, it works but I have another problem coming up, it's for the responsive.
As you can see on the video, it doesn't take the new width/height of my div. When I refresh, it's ok ...

How do I do it ?

Thanks again for your help.

Best regards,

[Bug resize window]

Hello,
I have a problem with the window resizing.
When I open my website, I scroll, everything works.
When I resize my web browser window, it generates a bug when I scroll again.
Indeed, Gsap stays with the size of my element + browser window before resizing.
I made a small video to show you my bug when I resize + scroll again.

 

Thanks to you.

Best regards

 

$(document).ready(function() {
    let $movie = $('.Video-container');
    if ($movie.length > 0) {
        movie();
    }
});

function movie() {
    gsap.set(".Video-pic", {
        xPercent: 0,
        yPercent: 0
    });
    gsap.to(".Video-pic", {
        width: '100vw',
        height: '100vh',
        scrollTrigger: {
            markers: true,
            pin: ".Video-container",
            start: "top top",
            scrub: true
        }
    });
}

<div class="Video">
    <div class="Video-container">
        <picture class="Video-pic container">
            <img class="Video-img" src="/images_contenu/conseiller.jpg" alt="">
        </picture>
    </div>
</div>

.container {
    margin: 0 auto;
    padding: 0 1.5rem;
    width: calc(100% - 4rem);

    @include media(">=small") {
        width: 72rem;
    }

    @include media(">=medium") {
        width: 96rem;
    }

    @include media(">=large") {
        width: 114rem;
    }

    @include media(">=extra-large") {
        width: 120rem;
    }
}
.Video{
    position: relative;
    margin: 15rem auto 0 auto;
    z-index: 2;
  &-container{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        top: 0;
    }
  &-pic{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        position: relative;
        top: 0;
    }
    
    &-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

 

[Tween eventCallback on timeline reverse]

Hi ZachSaucier , thanks for your help !

 

I hadn't thought about the call function, it did the job well  

[Tween eventCallback on timeline reverse]

Hi all,

 

I have a simple timeline (here just a little part) with some tweens, one of them have an onComplete callback.

 

mobileTimeline = gsap.timeline({paused: true})
  .to(pictures, {opacity: 0, duration: 0.5, onComplete: switchPic})
  .to(pictures, {opacity: 1, duration: 0.5}, ">");

function switchPic(){
  let picA = pictureA.find('.HomeIntro-img').attr('src');
  let picB = pictureB.find('.HomeIntro-img').attr('src');
  pictureA.find('.HomeIntro-img').attr('src', picB);
  pictureB.find('.HomeIntro-img').attr('src', picA);
}

Everythings runs well when i trigger mobileTimeline.play(), but i want to trigger the event callback on mobileTimeline.reverse() too. 

I have tried the onReverseComplete callback on the tween but it didn't triggered..

 

Someone can explain me how to proceed ?

 

Thanks !