GSAP Horizontal Scroll and Snapping at each child div in a Parent Div

Question

Good day,

I am working on a project that uses GSAP in order to animate a Horizontal scroller that consists of a parent container and has 3 child divs. I am using GSAP to handle my horizontal scroller.

I would like to fix my code to allow snapping at the first div the user sees in the Horizontal Scroller. Then as the user continues to scroll it should snap to the second div and finally snap to the third div. As the user scrolls they should reach the last section div that will should not snap all snapping should happen only in the horizontal scroller.

My trouble: Getting the snap to happen when the user scrolls to the first div, and vice versa if the user scrolls back up it should snap to the third div.

Here is small diagram of what I am trying to achieve:

Small Layout of expected behavior

I have used code pen to reproduce a minimal example of my code.

Horizontal Scroll Example

In my code snapping is happening on each child div, however, snapping is not happening uppon entering container for div 1 and the same is not happening when the user scrolls back up when entering div 3.

I have tried: Changing my trigger point in gsap object, this lead to visual errors

gsap.to(videoSections, {
  xPercent: -100 * (videoSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal_container", // Here to trigger and initiate upon div 1
    markers: true,
    pin: true,
    scrub: 0.5,
    start: "top",
    end: "+=3000",
    snap: {
      snapTo: [0, 0.5, 1],
      duration: 0.05
    }

NotTheDr01ds · Accepted Answer · 2024-04-07 15:46:06Z

1

Try pinning child elements dynamically.

edited Apr 7, 2024 at 15:46

NotTheDr01ds

21.8k8 gold badges66 silver badges96 bronze badges

answered Apr 7, 2024 at 15:23

silent fighter

111 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

NotTheDr01ds Over a year ago

This should really be a comment, but you don't have enough reputation yet to comment. You can gain reputation by posting quality questions and answers, or by improving existing questions/answers by editing them.

NotTheDr01ds Over a year ago

If you are suggesting an answer, then it could be improved with additional supporting information. If possible, please edit your post to add further details, such as explanations or documentation, so that others can confirm that your answer is correct. You can find more information in How do I write a good answer? - "Brevity is acceptable, but fuller explanations are better." It might be helpful to review some highly upvoted answers as examples to follow. Thanks!

ahuemmer Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

GSAP Horizontal Scroll and Snapping at each child div in a Parent Div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related