Is there a way to scroll a bit and move from the end of one panel to the end of another?

[hanm]

As you can see in this example (https://codepen.io/GreenSock/pen/YzygYvM), simply horizontal scrolling will move the 100vh x 100vw panels.
However, how can I create such an effect that scrolling from the end of a panel moves to the beginning of another panel, or conversely, scrolling from the beginning of a panel moves to the end of another panel? ?

 

What I want is these effects (https://sculove.github.io/slides/react-state-management/#/1). However, I want the same effect as passing ppt, which can be implemented only by horizontal scrolling without using buttons.

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

[mvaneijgen]

Hi @hanm welome to the forum!

 

Have you seen the Observer plugin? It allows you to wacht for all kinds of events and trigger some logic based on that, Below a demo that watches for scroll which triggers an animation. If you do want to use ScrollTrigger you could look in to the snap object and have the snap animation be faster, but if I understand your question correctly the observer plugin does exactly what you want 

 

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

 

 

Snap docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

• delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number) 
• directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false.
• duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.

[hanm]

I like to use snap objects whenever possible. However, when I set markers: true in my code and then check it, the information like start-panels, end-panels for each panel is not displayed. In other words, each panel cannot be controlled with Scrolltrigger. Only horizontal scrolling is applied. So when you apply a snap, it moves from the first panel to the last panel.

 

Here(https://github.com/chebread/gsap-example) is an example of my project using horizontal scrolling.
How can I use scrolltrigger's snap object in my project to produce the same effect as using Observer?

 

(I don't know how to configure React + Gsap + Typescript environment with Codepen, so I replace it with GitHub Repo. I'm really sorry.)

[GSAP Helper]

Yeah, a Github repo isn't very practical. If you'd like some assistance, please fork this starter template and recreate the issue in the most basic way possible (please don't include your whole project - just some colored <div> elements is fine). The simpler the better: 

https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

 

Also, it looks like you're not doing proper cleanup in React. gsap.context() is your new best friend in React because it makes it so easy. Please read this article: 

https://greensock.com/react

[hanm]

sorry. I configured a stackbiltz that runs the same as the GitHub repo.

Please check again here(https://stackblitz.com/edit/react-qc3vhe?file=src/App.js).

 

Quote

I like to use snap objects whenever possible. However, when I set markers: true in my code and then check it, the information like start-panels, end-panels for each panel is not displayed. In other words, each panel cannot be controlled with Scrolltrigger. Only horizontal scrolling is applied. So when you apply a snap, it moves from the first panel to the last panel.

 

Here(https://stackblitz.com/edit/react-qc3vhe?file=src/App.js) is an example of my project using horizontal scrolling.
How can I use scrolltrigger's snap object in my project to produce the same effect as using Observer?

 

[GreenSock]

Are you just looking for this?: 

snap: 1 / (panelRef.current.length - 1)

https://stackblitz.com/edit/react-p7q7hc?file=src%2FApp.js

[hanm]

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

I want the effect of scrolling one panel at a time like this. (but with horizontal scrolling)
I want to configure it using Scrolltrigger or Observer + Scrolltrigger.

[mvaneijgen]

Alright if you want this effect I would recommend using the observer plugin. Both the Observer plugin and ScrollTrigger are based on an animation, so remove the observer plugin at first and focus on just getting the animation up and running before you at the Oberser plugin

[hanm]

Is it possible to implement horizontal scrolling by any chance with Observer plugin?

 

Or is there a way to mix the ScrollTrigger + Observer plugin to create a horizontal scroll effect (using ScrollTrigger Plugin) + an effect that moves one panel at a time (using Observer plugin)?

 

If so, I'd like to configure it as Observer or ScrollTrigger + Observer.

Could you please tell me how to configure it like this?

[mvaneijgen]

I think there is a miss understanding. GSAP is an animation library, so everything is base on how you tween things. With the Observer plugin (and most of the time also with ScrollTrigger) nothing is scrolling it is just animating. So if you just animate your panels to xPercent: -100, eg move my element 100% to the left you'll create the illusion of scrolling to the right. 

 

I'm not behind a computer at the moment, so I can't create a demo for you, but everything is fairly straightforward if you start with the animating logic, before doing anything with the Observer plugin. And if your stuck post a minimal demo with the issue you're having 

[hanm]

I am new to GSAP, now I know some GSAP. Thanks for giving me advice. If a bug occurs while configuring using the Observer plugin, we will contact you with a new problem.

For now, I'll close this issue with your answer.
Thank you again.