vertical scrolling inside of horizontal scrolling in gsap

Question

I have to create a website where the content is horizontally scrolled. In the content i different panel and for one of them i should be able to scroll vertically before starting again horizontally scrolling.

I found an example of what it should look like here : on the products part ("days comfy) example

I know its quite bad user experience but still i need to do it.

I cant seem to find a way to fixed the vertically content correctly so the vertically scroll start before its fully on the screen and it ends before the vertically content is all seen.

I would like to horizontally scroll to project div, then when its fully on the screen, it gets fixed and i can vertically scroll the dynamic content. Then when i've scrolled through all of dynamic content. The project is unfixed and i can start scrolling horizontally again.

Thank you for your help, anything help!

my HTML code for now :

my scss :

body {
  overscroll-behavior: none;
  height: 100vh;
}
.container {
  width: 400%;
  overscroll-behavior: none;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}
.block {
  width: 100vw;
  height: 100vh;
  background: bisque;
}

// PROJECT

.project {
  width: 100vw;
  height: 100vh;
  background: red;
  //overflow: hidden;
  
  &__wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  &__dynamic-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    width: 56vw;
    height: 100%;
  }

  &__dynamic {
    display: flex;
    flex-wrap: wrap;
    height: 80vh;
  }
  
}

.project-content {
  &.--content1 {
    
    font-size: 100px;
    font-weight: bold;
  }

  &.--content2 {
    position: relative;
    width: 50%;
    height: 28vw;
  }

  &.--content3 {
    width: 50%;
    text-align: right;
  }
}

.project-slider {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2vw;
  background-color: cadetblue;
}

.project-info {
  background-color: cadetblue;
}

and my js/gsap settings :

let sections = gsap.utils.toArray(".block");

  gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".container",
      pin: true,
      scrub: 1,
      //snap: 1 / (sections.length - 1),
      // base vertical scrolling on how wide the container is so it feels more natural.
      end: "+=3000",
    }
  });

const projectSection = document.querySelector(".project");
  const projectContent = gsap.utils.toArray(".project__dynamic");
  // Vertical scrolling within the project section
  gsap.to(projectContent, {
    yPercent: -100 * (projectContent.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: projectSection,
      start: "top", 
      end: "+=300%", // Adjust the end point according to your layout
      scrub: true,
      pin: true,
      markers: true,
      onEnter: () => console.log("Entered project section"),
      onLeaveBack: () => console.log("Exited project section")
    }
  });

Codepen

vertical scrolling inside of horizontal scrolling in gsap

Answers (0)

Related Questions