ScrollTrigger - Horizontal Scrolling

[Pradeep PI 1 Likes (Newbie)]

On 8/2/2021 at 10:35 PM, GreenSock said:

Hi, @Pradeep PI If you'd like some help, please provide a minimal demo and we'd be happy to take a look. 

See the Pen BaRPGqZ?editors=1100 by pradeepppi (@pradeepppi) on CodePen

 

this is my minimal demo.. I tried to create an animation for text and image when that panel come into the viewport ..  but it doesnt work well

[GreenSock 16,322 Likes (Superhero)]

That's because you're not actually scrolling horizontally at all - you're simulating it with an animation. 

 

If your goal is to do something when a particular element enters the viewport, you can use this helper function: 

function observe({targets, onEnter = () => 0, onLeave = () => 0, threshold = 0.001, rootMargin = "0px", root}) {
  let observer, func = entries => entries.forEach(entry => entry.isIntersecting ? onEnter(entry.target, observer) : onLeave(entry.target, observer));
  observer = new IntersectionObserver(func, {root, rootMargin, threshold });
  gsap.utils.toArray(targets).forEach(el => observer.observe(el));
  return observer;
}

// USAGE:
observe({
  targets: ".img-fluid",
  onEnter: el => console.log("enter:", el),
  onLeave: el => console.log("leave:", el)
});

I have an idea for a new feature that may make this even easier, but I'll need time to explore feasibility. 

[jenda 1 Likes (Newbie)]

Hello, 

I'm trying to have a section with horizontally scrolled elements - it is usualy hidden and you can open it with a click on a link bellow. It should look like having the conent horizontally out of the page. By scrolling, you should see all the content. 

 

See the Pen BaZNNQw by jankout (@jankout) on CodePen

 

[Cassie 3,771 Likes (Superhero)]

Hi there Jenda,

I'm afraid we don't have the capacity to sculpt custom solutions for people in these forums.

If you have a GSAP-related question could you open up a new thread including your demo and the specific issue you need help with.

Thanks.

[jenda 1 Likes (Newbie)]

8 minutes ago, Cassie said:

Hi there Jenda,

I'm afraid we don't have the capacity to sculpt custom solutions for people in these forums.

If you have a GSAP-related question could you open up a new thread including your demo and the specific issue you need help with.

Thanks.

I used the code above and my question is GSAP-related. If you look at my GSAP code you will see what I'm using there. I guess I need to do some small changes. But, unfortunately, I'm quite new GSAP user and I cannot see the problem. I would appriciente to get any help. 

[Cassie 3,771 Likes (Superhero)]

Sorry to repeat myself, but this is an old thread - could you open up a new thread including your demo and the specific issue you need help with.

[GreenSock 16,322 Likes (Superhero)]

Update: there's a new feature in GSAP 3.8 that makes this much easier - containerAnimation! See the post at:

🎉

 

[cy66a 0 Likes (Newbie)]

Hi! And thank you for help! 
How can I add a <h2> Title </h2> into this example? It has to be shown all the time you scroll.
I understand, that container's height should be less than 100vh btw. But how to make h2 visible all the time. 🤔💚
 

  

On 6/3/2020 at 8:59 AM, GreenSock said:

The problem is that your #container element is NOT the full width of all its contents. It is only as wide as the screen. So everything is working the way it's supposed to from GSAP's perspective, but you've got it only moving xPercent: -100 which means it moves to the left by the width of the screen (not nearly enough). 

 

So all you'd need to do is correct the distance you want it to travel so that it's the entire width of all your elements MINUS the width of the screen (otherwise it'll go all the way off the screen). So your tween could be: 

 

gsap.to(container, {
  x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: container,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 1,
    end: () => "+=" + container.offsetWidth
  }
})

Here's a fork:

 

 

 

Is that what you were looking for? 

 

 

[Cassie 3,771 Likes (Superhero)]

I'd probably put position:fixed on the h2. 🔧

 

https://www.w3schools.com/css/css_positioning.asp