Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
slik

ScrollTrigger - Horizontal Scrolling

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 4 weeks later...

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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

🎉

 

Link to comment
Share on other sites

  • 1 month later...

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? 

 

 

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.
×