Jump to content
Search Community

Horizontal scroll with feedback for navigation

steen hjalmar larsen test
Moderator Tag

Recommended Posts

Is there a way to find out which panel is active / visible when scrolling with the mouse
Would like the navigation to show the panel that is archived e.g. by un underlining
Have been trying for a long time without success to find a solution

 

Would greatly appreciate a solution

See the Pen oNqpOQE?editors=1111 by shl (@shl) on CodePen

Link to comment
Share on other sites

As you likly will work with snap(-ping), there is a callback onComplete. In Combination with labels that gives you the tool to change the classes inside you navigation ad history stuff if you like - whatever.

Does that help you, or do You need more explanations?

  • Like 1
Link to comment
Share on other sites

3 minutes ago, Cassie said:

Ah, that's a good idea. Alternatively you could use containerAnimation to check when the sections come into view.
 

See the Pen

See the Pen LYdewGx?editors=1011 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

Well in that case your suggestion seems way better suited to the situation. I actually answered from memory, thinking of a similar situation I solved - but my setup was different. 

Link to comment
Share on other sites

Unfortunately didn't quite understand your suggestion iDad5, could you make a pin as an example, on the other hand the pin that Cassie has created seems to work fine
Thank you both, have spent a whole day without finding a good solution.
Was thinking about using onUpdate, but couldn't get it to be dynamic

 

gsap.timeline({
            scrollTrigger: {
                onUpdate: (self) => {
                    let breackPoint = [0, 0.33, 0.66, 1];
                    let thisProgress = Number(self.progress.toFixed(3));
                    if (thisProgress > 0 && thisProgress < breackPoint[1]) {
                        console.log("first-inteval");
                    }
                },
Link to comment
Share on other sites

Really - Not for me? I have panel 1 already, which makes sense given the trigger positions. You can change those to get the result you want, it was just a rough guide to give you an idea of what you can do with callbacks and containerAnimation!

 

Jack actually provided you with a more completed option in the comment above though too. 
   

 

Link to comment
Share on other sites

What I'm looking for is
1. When the page is loaded and the user has not yet scrolled down to the horizontal scroll, nothing happens
2. When the user scrolls down to the horizontal scroll window and the horizontal animation starts, it is registered
2.1 When Panel 1 is in focus, I get information that panel is active (console.log(panel.id)
2.2 The same happens with the rest of the panels

The example that Jack shows works a little better, but also has errors. e.g. if I scroll to panel 2 but undo my scroll and scroll back then it will not be registered? and then I also get feedback here that I am at panel 1 when the page is loaded

Link to comment
Share on other sites

Ah yeah - So the reason that it's logging out panel 1 when the page is loaded is because of where the triggers are positioned. The page is already horizontally at panel 1, it just hasn't reached it vertically

 

If you want to trigger something when you scroll vertically down to that panel you'll need to add a vertical trigger instead.

 

All if this is possible. Why don't you give it a go? We're here if you get stuck and more than happy to point you to specific parts of the API.

To recap - here are the puzzle pieces you need to figure this out -

  • ContainerAnimation for horizontal triggering
  • Normal ScrollTrigger for vertical triggering
  • Callbacks to run custom logic
  • Trigger start and end positions to adjust when the callbacks run
  • Like 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...