ALTIMAX

I finally solved my problem on my own. Thanks anyway. Have a nice day!

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 : https://codepen.io/designcourse/pen/gOjZKOO 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.

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 ?

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 !

Nothing, I have updated (little clean) my Pen : https://codepen.io/Pratrax/pen/abWavee

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

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 : https://codepen.io/Pratrax/pen/abWavee Best regards

Thank you so much ! It perfectly works !

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

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 https://codepen.io/Pratrax/pen/abWavee

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

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

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, Resize-2.mp4

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; } } resize bug.mp4

Hi ZachSaucier , thanks for your help ! I hadn't thought about the call function, it did the job well