Jump to content
Search Community

Scroll down vertically, scroll container horizontal (without defining width of container)

shaneharley test
Moderator Tag

Recommended Posts

Hi! Trying to recreate something like the included codepen, but without manually setting the width of the container. I am planning on using a CMS so want it to automatically be able to adjust based on how many elements there are in the container.

Am using nextJS & styled components so not totally sure how to get a codepen up and running but here's what my code looks like

 

The CSS

const ExperimentContainer = styled.section`
height: 100vh;
width: 100vw;
`
const BoxWrapper = styled.div`
  //this is the bit I don't want to have to specify as it will vary depending on how many boxes are within the wrapper
  width: 480%;
  //
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
`

const Boxes = styled.div`
  flex: 0 0 auto;
  width: 80vw;
  background-color:rgba(201,125,212);
  box-sizing: border-box;
  &:nth-child(odd) {
    background-color:rgba(125,125,212);
  }
`

Greensock

  const experimentContainerRef = useRef()
  const boxWrapper = useRef()

  useEffect(() => {
    gsap.to(boxWrapper.current, {
      xPercent: -100,
      //if I don't specify the width of the BoxWrapper this doesn't work anymore
      x: innerWidth,
      scrollTrigger: {
        trigger: experimentContainerRef.current,
        start: "top top",
        end: () => innerWidth * 3,
        pin: true,
        scrub: true,
      },
    })
  }, [])

Codepen from GSAP docs

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

Link to comment
Share on other sites

Hey,

 

This sample in the GreenSock collection uses snapping for the horizontal sections:

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

 

This fork I made comments out the snapping code and sets scrub to true in order to move the elements based just on the scroll position:

See the Pen qBaWwWB?editors=0010 by rhernando (@rhernando) on CodePen

 

You could also move the entire container as well in order to tween just one element, but the CSS and HTML of those samples are simple enough to be added in any other app.

 

Happy Tweening!!!

 

  • Like 3
Link to comment
Share on other sites

Thanks for this. I was trying to do a whole bunch of other things that was making it way too complicated so I've paired it back and am using your solution.

 

One place I'm getting stuck though... this only seems to work if the sections are 100% width. Any ideas if the sections are only 80% viewport width? (I end up with the last section hitting the left edge of the page, and white space on the right)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...