Jump to content
Search Community

Scrolling slide by slide with scrollTrigger and scrollTo both horizontal and vertical scroll

Olilou
Moderator Tag

Recommended Posts

Posted

Hi, I've created a mix of horizontal scroll (for slides in a project) and vertical scroll (for projects) with scrollTrigger.

 

It works well, but I'm looking for a way to scroll slide by slide using a button "next slide" (See the red button in the top left of the codepen).

I try to use scrollToPlugin that helps me to `scrollTo` the project and want to use `offset` to scroll to the right slide.

 

I don't understand why the offset is not stoping to the right slide but in the middle of the slide ?

 

Some help would be appreciated :)

See the Pen VYZXzWr by infoliv (@infoliv) on CodePen.

mvaneijgen
Posted

Hi @Olilou welcome to the forum! 

 

Check out my post what the logic behind the ScrollTo and animating to a specific point in a ScrollTrigger animation. Hope it helps and happy tweening! 

 

 

Posted
On 1/12/2025 at 4:23 PM, mvaneijgen said:

Hi @Olilou welcome to the forum! 

 

Check out my post what the logic behind the ScrollTo and animating to a specific point in a ScrollTrigger animation. Hope it helps and happy tweening! 

 

 

OK thanks.
Now I calculate scrollTo depending on "start" and "end" of scrolltrigger.

However, I had to specify ease to "none" otherwise it wouldn't work either.

Posted

Just to be clear, it will work with any easing, the problem is that when scrubbed it would look odd or weird, because the animation could start slower/faster than it could end, or start and end faster and go slower in the middle, depending on the easing function you use.

 

In order to better understand check the Ease Visualizer in our docs:

https://gsap.com/docs/v3/Eases

 

You can also check this demo with different eases in order to understand that. Just change the easing function in line 7 of the JS section and see the differences:

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen.

 

Hopefully this clear things up.

Happy Tweening!

  • Like 1

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