Jump to content
Search Community

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

hanm test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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.
  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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 

Link to comment
Share on other sites

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.

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