Jump to content
Search Community

Horizontal scroll stuck after the first slide, and the background blinking

GiGiX test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

 

GSAP is a great tool, and I'm sure I missed something important and that's why I'm facing with this issue. I rewrote it few times, because I thought there's a typo, but I'm sure it's a programming issue. I used ScrollTrigger only for very basic animations, forgive me for my rookie mistakes. :) After few slides, I would like scroll horizontally, that's where I have the issue what I mentioned in the title. It looks like because of the animations on the first few slides, the horizontal scroll part thinks that the user reached the target.

- If that's the issue, then what's the best practice to solve it?

 

The users needs to wait to much between the sections, for that reason I would like to speedup the swap between the vertical scroll sections. For this I tried to use durationbut it doesn't have any effect. Is it possible to do it?

 

Thank you!

See the Pen abyOvLR by rryp111 (@rryp111) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums, @GiGiX!

 

Nah, it's not a rookie mistake - you've got a tricky scenario there. But don't worry, it's totally solvable. 

 

The problem is that you were pinning an element inside another element that's also pinned. That's not a good recipe for success :) Just pin the outer element in both scenarios. You can even make the horizontal one pick up exactly where the previous ScrollTrigger picks up by using a function-based end value of self => self.previous().end

 

See the Pen rNzVWjL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that more like what you wanted? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

If I would like to add more sections below the horizontal part, then should I create a new animation, or can I use it with the existing code? What's the best practice? Probably it's not a good solution to duplicate the code with different classes.

 

let sectionsArr = gsap.utils.toArray(".panel-vertical");
sectionsArr.forEach((element) => {
  gsap.from(element, {
    autoAlpha: 0,
    ease: "power2",
    scrollTrigger: {
      trigger: element,
      scrub: true,
      pin: true,
      start: "top top",
      end: "+=100%"
    }
  });
});

 

Just to test it I added 2 more sections below, and it broke the layout: 

See the Pen eYENyzb by rryp111 (@rryp111) on CodePen

Link to comment
Share on other sites

Jack will likely have a better solution, but I tend to be very much on the 'if it works it works' camp.

The order of the scrollTriggers is very important as the second vertical section needs to base it's trigger positions based on the horizontal section. If that scrollTrigger hasn't been created yet the positioning is going to be off. Maybe there's a better way to do this but one extra repeated scrollTrigger isn't going to be the end of the world.

See the Pen bGrdxLv?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Yep, as @Cassie said it's critically important that you create ScrollTriggers in the order they occur on the page because the ones further up may push the lower ones down (thus affecting their start/end scroll positions). If you must create them out of order, you can set a refreshPriority on each but in your example I'd just do it like this: 

See the Pen BadNbmj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In your first loop, just check to see if the section has the ".panels-horizontal" class and if so, initialize it at that point so that things are all created in the proper order. 

 

Does that clear things up? 

  • Thanks 2
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...