Jump to content
Search Community

ScrollTrigger - Horizontal Scrolling

slik test
Moderator Tag

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

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

  • 1 month later...
  • 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

  • 9 months later...

 

Hi @Cedar and welcome to the GreenSock forums!

 

The main problem is adding the ScrollTrigger configuration in the timeline's default configuration object. Keep in mind that everything in the defaults object is passed to every single instance in a timeline. Also try removing the scrub property from the ScrollTrigger configuration and/or the delay value for the button, since that prevents the animation from being visible. Is happening, but when the element is no longer visible.

 

Try one of the following options and see which one works better for you:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container__1",
    scrub: 1
  }
});

tl.from(".con1txt", {
  y: -1000
}).from(".scrollto", {
  opacity: 0,
});

Or

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container__1"
  }
});

tl.from(".con1txt", {
  y: -1000
}).from(".scrollto", {
  opacity: 0,
  delay: 0.5
});

 

Happy Tweening!!!

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