Olilou Posted January 12 Posted January 12 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 January 12 Posted January 12 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!
Rodrigo Posted January 12 Posted January 12 Hi, Maybe these demos can help: See the Pen VwNNNJw by GreenSock (@GreenSock) on CodePen. See the Pen JjqRErG by GreenSock (@GreenSock) on CodePen. Happy Tweening!
Olilou Posted January 13 Author Posted January 13 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.
Rodrigo Posted January 13 Posted January 13 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! 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now