Jump to content
Search Community

Move Horizontal Scrolling Menu dynamically

marc868 test
Moderator Tag

Recommended Posts

Hi,

on my website, I have a case study page that is pretty long with 10 sections, so I want to create a horizontal menu with links to each section on the page. The user will be able to swipe this horizontally for the small screen devices so that the user can access links that would normally be off the viewport canvas.

I understand how to achieve all of that but what I need is this; when the user scrolls down and reaches the fifth section who's menu link is slightly off-canvas to the right, the menu will slide left enough so that the link icon appears into the viewport stopping on the far left. This will, in turn, bring the other links that follow on from that one onto the canvas too.
 

The problem though is that if I add a class to the scrolling menu container which assigns a transform: translate(X) value and therefore animates it to the left when the user reaches the particular section, the whole menu fixes at that point, and it's not possible for the user to then manually swipe the menu back and forth to access any menu link they desire from that point on.
 

I also want the same to happen in reverse, so that after the above has triggered and the menu has shifted along to the left, when the user decides to scroll back up the page and past the section that triggered the initial menu slide action, it slides back to the right to its original position.

This behavior with the menu slide being triggered should happen each and any time the user scrolls past that certain point in either direction (up or down), yet the user should still be able to manually swipe the menu to any point either way.
 

I know all of this must be possible using Javascript but I've tried loads of different ideas, including element.scrollintoView, which doesn't work since assigning that to one IDs in the menu doesn't slide the whole menu over. I've also tried moving the menu by adding an animated class but that didn't work either.

I've searched high and low online and cannot find tutorials or solutions close to the behaviour I want, nor can I find any working examples on live sites.


So, I was wondering if there was anyway to achieve this with GASP?
 

Many thanks.
 

Marc

Link to comment
Share on other sites

Update:
 

I've created a basic example on code pen but for som ereason, on this the addClass isn't working to make the menu scroll to the left when the about section is reached:

 

See the Pen MWyqPYL by creativezest (@creativezest) on CodePen


 

You'll see I've added some javascript to attempt to get the menu to scroll left when the page is scrolled down to the #about section so that the 'about' link in the bottom menu slides to the far left of the viewport. But as I said, it doesn't seem to be working.
 

As I explained in my previous post, this is what I am trying to achieve as well as make the menu scroll backward so that the 'home' link is in its original position on the far left of the viewport when the user scrolls back up past the #about section.

I also need the user to still be able to manually swipe the menu left and right after the above behaviors have taken place.

Many thanks,
Marc

 

Screenshot 2020-09-17 at 21.45.57.png

Screenshot 2020-09-17 at 21.46.27.png

Link to comment
Share on other sites

On 9/17/2020 at 10:56 PM, marc868 said:

You'll see I've added some javascript to attempt to get the menu to scroll left when the page is scrolled down to the #about section so that the 'about' link in the bottom menu slides to the far left of the viewport. But as I said, it doesn't seem to be working.

 

Hey @marc868

 

It actually does for me.

In your pen it doesn't do a thing, because you are using jQuery for your code, but you are not loading it in the pen.

 

Also, I think, anything, that is not inside the <body>, won't work on codepen either.

 

Here you go, I think this is better

 

Edit:

Just fixed up the pen so far - did nothing regarding the actual question yet

 

 

See the Pen f85a80dfa512885a3fe159939b473f4c by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hi Akapowl,

I hope you are well and thanks for your input.

OK yes, of course, thanks for pointing that out.

OK, so that's what I had working on my actual build but as you can see it fixes at the point where 'About' is on the far left. So I have the following issues:

1. After that point, when you scroll back up the page the menu doesn't slide back to it's original place.
2. You can't manually swipe or scroll the menu back and forth (left and right).

I need to solve the above two issues but I've been trying to work this out for two days now without finding any solutions or live examples online. It's like no one's ever been able to achieve this particular behaviour, which I can't believe to be the case...surely lol!

If you have any ideas I'm all ears.

Thanks again.
Marc :-)

Link to comment
Share on other sites

 

I think, I understood what your issues were, and I think I found a suitable solution for you :) 

 

You could do what you explained with the help of GSAP, ScrollTrigger and the ScrollTo-Plugin, like so:

 

First, add IDs to the links you want to be scrolled to, e.g.:

 

<a href="#home" id="home-link" class="link">Home</a>

 

(I got rid off the .scroll-links-container in the following demo, by the way)

 

 

Then in your JS, you could set up a ScrollTrigger like so

 

ScrollTrigger.create({
  
  trigger: "section#about",
  
  start: "top bottom",  
  end: "+=9999px",
    
  onEnter: () => {
    gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#about-link", offsetX: 0}, ease: "none"} );
  },
  
  onLeaveBack: () => {
    gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#home-link", offsetX: 0}, ease: "none"} );
  }

})

 

Its start is set to "top bottom" - which means, when the top of the about-section hits the bottom of the window, it starts.

In this case what it starts, is what is in the onEnter-callback:

 

It tells the ScrollTo-Plugin, to scroll your #scrollMenu on the x-axis to your about-link.

When you scroll back upwards, past that mentioned start-point again, it triggers the onLeaveBack-callback, which scrolls the scrollmenu back to the home-link. 

 

This way the scroll-menu should  remain scrollable/swipeable the rest of the time in both dirtections.

 

See the Pen cbd4a7f48dc8d404d6ba9715bfb12f85 by akapowl (@akapowl) on CodePen

 

 

 

Oh and by the way: 

This solution totally works without jQuery.

 

Hope it helps :)

 

Paul

 

  • Like 2
Link to comment
Share on other sites

 

Glad to hear :) 

 

You find info about the installation process here:

https://greensock.com/docs/v3/Installation

 

and even more info on everything here:

https://greensock.com/docs/

 

What you need is GSAP, ScrollTrigger, and the ScrollTo-Plugin (Both Plugins are free to use alongside GSAP)

 

These are the files used in the codepen-demo:

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js

 

 

 

  • Like 3
Link to comment
Share on other sites

OK great,

I'll have a look at implementing this shortly.

I'll send you the link to the finished website when it's complete.

Thanks again Paul I really appreciate your help with this. :-)

Have a great night/day, wherever you are in the world.

Cheers,
Marc

  • Like 2
Link to comment
Share on other sites

 

You're very welcome.

 

Once you dig into GSAP a bit, you'll find, that it makes all sorts of crazy things possible - even more so, with all the extra plugins available.

 

And just as much, it makes the seamingly not-so-crazy things crazily easy.

 

A great night/day to you too - and have fun exploring GSAP

 

  • Like 4
Link to comment
Share on other sites

Hi,

so I've tired implementing this into my actual build using some of the code from the codepen I'd created and your solution but although I have the menu styled right the behaviour just won't work. I'll paste as much code as I think neccessary for you to have a look. 

Firstly I've linked to the 3 files via cloudflare links in the <head> like so:
 

 <!-- HORIZONTAL MENU BEHAVIOR -->
 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js">
 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js">
 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js">



This is the menu html just taken from the basic codepen to see if I can get it working:
 

 <div id="scrollmenu">
                          <div class="scroll-links-container">
                              <a href="#intro" id="home-link" class="link">Home</a>
                              <a href="#news" class="link">News</a>
                              <a href="#contact" class="link">Contact</a>
                              <a href="#about" id="about-link" class="link">About</a>
                              <a href="#support" class="link">Support</a>
                              <a href="#blog" class="link">Blog</a>
                              <a href="#tools" class="link">Tools</a>  
                              <a href="#base" class="link">Base</a>
                              <a href="#custom" class="link">Custom</a>
                              <a href="#testimonials" class="link">Testimonials</a>
                              <a href="#more" class="link">More</a>
                          </div>
 </div>



This is the first section which is the inrtoduction but I've just added the id="home-link" to it for testing purposes:
 

 <!-- INTRO TEXT -->

    <a id="introduction" class="page-section"></a>

    <div class="section black intro-section" id="home-link" data-aos="fade-up" data-aos-delay="400">
        <div class="container introduction" id="intro">
            <div class="row">
                <div class="col-12">
                    <div onscroll="myFuntion">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla ullamcorper sem ut gravida. Aliquam a libero bibendum, aliquet ipsum id, iaculis elit.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>



This is the trigger section which is the prototype section but I've just added the id="about-link" to it for testing purposes:

 

<a id="prototype" class="page-section"></a>

            <!-- PROTOTYPE INTRO -->
            <div class="section true-black prototype-user-testing parallax-wrapper prototype-background" id="about">

                <div class="container margin-bottom parallax-content">
                    <div class="row">
                        <div class="col-12">
                            <h3 class="section-title internal-title-no-top"><span class="grey-text">High fidelity</span><br />
                                <span class="white-font">prototype</span></h3>
                            <a href="prototype-visuals.html"><button class="primary">View all prototype visuals<ion-icon name="arrow-forward-outline" class="arrow-forward-outline-cta white"></ion-icon></button></a>
                        </div>
                    </div>
                </div>


                <div class="container prototype-phone parallax-content">
                    <div class="row">
                        <div class="col-6 full-width prototype">
                            <h3 class="section-title internal"><span class="grey-text">Tap phone</span><br />
                                <span class="white-font">to watch.</span></h3>
                            <h4 class="white-font sub-heading">Designed to test</h4>
                            <p class="light-grey-font">So from sketching through wireframing in Axure and visual design we are able to build a branded prototype based on the different user scenarios we had established in the define phase. </p>
                        </div>

                        <!-- PROTOTYPE -->

                        <div class="col-6 full-width right parallax-content">
                            <div class="samsung-container">
                                <div class="video-container">
                                    <video autoplay controls loop>
                                        <source src="../../video/user-flow-prototype-better.mp4" type="video/mp4" />
                                    </video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               


And then finally, this is the javascript, just befire the closing body tag:

 

<script>
    
$(document).ready(function() {
    
    ScrollTrigger.create({

      trigger: ".section#about",

      start: "top bottom",  
      end: "+=9999px",

      onEnter: () => {
        gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#about-link", offsetX: 0}, ease: "none"} );
      },

      onLeaveBack: () => {
        gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#home-link", offsetX: 0}, ease: "none"} );
      }

    })
});
    
</script>


I know this code is more complex than my basic example in codepen but theoretically your solution should work with this but I can't get it to work at the moment.

Thanks,
Marc

Link to comment
Share on other sites

Hi Paul, 

I meant to send that reply late last night but when I checked this morning I obviously hadn't submitted it...that's what happenes from working too late lol!

Anyway, this morning I've stripped all other elements out of my build apart from the necessary parts to make required to make this work so I have the #scrollmenu, Intro Section (home), Prototype Section (about) and a few other sections below that, I also have the 3 cloudflare links just before the closing body tag and the ScrollTrigger script just after the 3 links at the bottom of the page.

I've also made the necessary changes and added the 3 cloudflare links and the ScrollTrigger script to the basic example on my local drive (the code I uploaded to codepen which you adapted last night).

So everything is in place and there's no other javascript or jQuery that might conflict, yet it still isn't working. I just can't work it out. The only thing I can think of is that there's a problem with the cloudflare links and that maybe I might need to reference the scripts locally instead?

Thanks,
Marc

 

Link to comment
Share on other sites

17 minutes ago, marc868 said:

Firstly I've linked to the 3 files via cloudflare links in the <head> like so:
 


 <!-- HORIZONTAL MENU BEHAVIOR -->
 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js">
 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js">
 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js">

 

 

Hey @marc868

 

This is not the way to include js-files into your project.

They are not css-stylesheets, they are scripts, in the end.

 

Try adding this instead, just above your closing body-tag in your html:

 

  <!-- Scripts -->
  
  <script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
  
  <script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
  
  <script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
  
  <!-- End Scripts -->

 

 

 

Try this, if you havn't already, and let me know if you already did - or if it changes things for you.

Cheers

 

 

  • Like 2
Link to comment
Share on other sites

 

One more thing I noticed is this:

 

<div class="section black intro-section" id="home-link" data-aos="fade-up" data-aos-delay="400">

 

This also has an id of "home-link", while you have

 

<a href="#intro" id="home-link" class="link">Home</a>

 

an id of "home-link" on your link, too.

 

IDs are supposed to be specific for one element only.

Having multiple IDs on several elements may produce conflicts.

 

The section you want your page to scroll-to should have the ID of what is after the '#' in the href of your link.

Your link has an ID of its own ( home-link ), so the scrollmenu can be scrolled to that specific ID point easily.

 

Hope this makes sense.

Cheers

Paul

 

  • Like 2
Link to comment
Share on other sites

Hi Paul,

of course! I must be going mad, I should have realised that about the cloudflare links, I was over tired last night working until 3am.

Please forgive my stupidity lol!

And yes, I did realise that while I was working on it last night so I did actually change that after I'd posted that.

I'll amend the links now and see if that works.

Thanks
Marc

Link to comment
Share on other sites

OK so I've made those changes and it still isn't working.

Here's all of my code:

 

!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Horizontal Scrolling Menu</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
             
        <!-- HORIZONTAL MENU BEHAVIOR -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
        
        <!-- CSS STYLES -->
        
        <style>
        
            body, html {
                margin: 0;
                padding: 0;
                font-family: sans-serif;
                font-size: 16px;
                background-color: white;
            }

            html {
                scroll-behavior: smooth;
            }

            wrapper {
                display: block;
                width: 360px;
                margin: 0 auto;
                background-color: black;
                padding-top: 20px;
            }

            h1 {
                font-family: sans-serif;
                font-size: 3.5rem;
                color: white;
                padding: 0px 20px;
            }

            h2 {
                font-family: sans-serif;
                font-size: 2.5rem;
                color: white;
            }

            section {
                width: 360px;
                background-color: transparent;
            }

            .container.heading {
                padding: 20px 20px 20px 20px;
            }

            .container {
                padding: 200px 40px 200px 40px;
            }

            div#scrollmenu {
                position: fixed;
                bottom: 0;
                background-color: #333;
                overflow: auto;
                white-space: nowrap;
                width: 360px;
                margin: 0 auto;
                text-align: center;
                padding: 0;
                margin: 0;
            }

            div#scrollmenu a {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 25px 25px;
                text-decoration: none;
            }

            div#scrollmenu a:hover {
                background-color: #777;
            }
 
        </style>
        
    </head>
    
    <body>
        
    <!-- CONTENT SECTIONS -->
        
    <wrapper>
        
    <div class="container heading">
        <h1>Horizontal Scrolling Menu</h1>
    </div>
        
    <section id="home" class="page-section">
        <div class="container">
            <h2>Home</h2>
        </div>
    </section>
        
    <section id="news" class="page-section">
        <div class="container">
            <h2>News</h2>
        </div>
    </section>
        
    <section id="contact" class="page-section">
        <div class="container">
            <h2>Contact</h2>
        </div>
    </section>
        
    <section id="about" class="page-section">
        <div class="container">
            <h2>About</h2>
        </div>
    </section>
        
    <section id="support" class="page-section">
        <div class="container">
            <h2>Support</h2>
        </div>
    </section>
        
    <section id="blog" class="page-section">
        <div class="container">
            <h2>Blog</h2>
        </div>
    </section>
        
    <section id="tools" class="page-section">
        <div class="container">
            <h2>Tools</h2>
        </div>
    </section>
        
    <section id="base" class="page-section">
        <div class="container">
            <h2>Base</h2>
        </div>
    </section>
        
    <section id="custom" class="page-section">
        <div class="container">
            <h2>Custom</h2>
        </div>
    </section>
        
    <section id="testimonials" class="page-section">
        <div class="container">
            <h2>Testimonials</h2>
        </div>
    </section>
        
    <section id="more" class="page-section">
        <div class="container">
            <h2>More</h2>
        </div>
    </section>
        
        
    <!-- HORIZONTAL SCROLLING MENU -->

    <div id="scrollmenu">
      <div class="scroll-links-container">
          <a href="#home" id="home-link" class="link">Home</a>
          <a href="#news" class="link">News</a>
          <a href="#contact" class="link">Contact</a>
          <a href="#about" id="about-link" class="link">About</a>
          <a href="#support" class="link">Support</a>
          <a href="#blog" class="link">Blog</a>
          <a href="#tools" class="link">Tools</a>  
          <a href="#base" class="link">Base</a>
          <a href="#custom" class="link">Custom</a>
          <a href="#testimonials" class="link">Testimonials</a>
          <a href="#more" class="link">More</a>
      </div>
    </div>
        
    </wrapper>
        
    
    <!-- SCRIPT -->
              
        
    <script>
        
        ScrollTrigger.create({

          trigger: "section#about",

          start: "top bottom",   

          onEnter: () => {
            gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#about-link", offsetX: 0}, ease: "none"} );
          },

          onLeaveBack: () => {
            gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#home-link", offsetX: 0}, ease: "none"} );
          }

    </script>

    </body>
    
</html>

Let me know if you spot anything in here that might be causing this not to work.

Thanks,
Marc
 

Link to comment
Share on other sites

 

I spotted one or two things.

 

1st:

Your doctype up on top is missing the initial '<'

 

2nd:

I'd still suggest, you insert all the scripts at the bottom just above the closing body tag.

First off, all the scripts that are neccessary for cour custom script to work, and then your custom script.

 

3rd:

Inside your custom script you are missing the closing brackets for the 

 

ScrollTrigger.create({

 

Also, just as a suggestion, if you would have more custom-script-code than you have here, you might want to think about putting that in a file of its own, too, and put it in your html where your custom script is now, like maybe so:

 

<script type="text/javascript" src="js/main.js"></script>

 

 

 

 

 

Try this version. It worked for me.

 

 

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Horizontal Scrolling Menu</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
             
 
        
        <!-- CSS STYLES -->
        
        <style>
        
            body, html {
                margin: 0;
                padding: 0;
                font-family: sans-serif;
                font-size: 16px;
                background-color: white;
            }
 
            html {
                scroll-behavior: smooth;
            }
 
            wrapper {
                display: block;
                width: 360px;
                margin: 0 auto;
                background-color: black;
                padding-top: 20px;
            }
 
            h1 {
                font-family: sans-serif;
                font-size: 3.5rem;
                color: white;
                padding: 0px 20px;
            }
 
            h2 {
                font-family: sans-serif;
                font-size: 2.5rem;
                color: white;
            }
 
            section {
                width: 360px;
                background-color: transparent;
            }
 
            .container.heading {
                padding: 20px 20px 20px 20px;
            }
 
            .container {
                padding: 200px 40px 200px 40px;
            }
 
            div#scrollmenu {
                position: fixed;
                bottom: 0;
                background-color: #333;
                overflow: auto;
                white-space: nowrap;
                width: 360px;
                margin: 0 auto;
                text-align: center;
                padding: 0;
                margin: 0;
            }
 
            div#scrollmenu a {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 25px 25px;
                text-decoration: none;
            }
 
            div#scrollmenu a:hover {
                background-color: #777;
            }
 
        </style>
        
    </head>
    
    <body>
        
    <!-- CONTENT SECTIONS -->
        
    <wrapper>
        
    <div class="container heading">
        <h1>Horizontal Scrolling Menu</h1>
    </div>
        
    <section id="home" class="page-section">
        <div class="container">
            <h2>Home</h2>
        </div>
    </section>
        
    <section id="news" class="page-section">
        <div class="container">
            <h2>News</h2>
        </div>
    </section>
        
    <section id="contact" class="page-section">
        <div class="container">
            <h2>Contact</h2>
        </div>
    </section>
        
    <section id="about" class="page-section">
        <div class="container">
            <h2>About</h2>
        </div>
    </section>
        
    <section id="support" class="page-section">
        <div class="container">
            <h2>Support</h2>
        </div>
    </section>
        
    <section id="blog" class="page-section">
        <div class="container">
            <h2>Blog</h2>
        </div>
    </section>
        
    <section id="tools" class="page-section">
        <div class="container">
            <h2>Tools</h2>
        </div>
    </section>
        
    <section id="base" class="page-section">
        <div class="container">
            <h2>Base</h2>
        </div>
    </section>
        
    <section id="custom" class="page-section">
        <div class="container">
            <h2>Custom</h2>
        </div>
    </section>
        
    <section id="testimonials" class="page-section">
        <div class="container">
            <h2>Testimonials</h2>
        </div>
    </section>
        
    <section id="more" class="page-section">
        <div class="container">
            <h2>More</h2>
        </div>
    </section>
        
        
    <!-- HORIZONTAL SCROLLING MENU -->
 
    <div id="scrollmenu">
      <div class="scroll-links-container">
          <a href="#home" id="home-link" class="link">Home</a>
          <a href="#news" class="link">News</a>
          <a href="#contact" class="link">Contact</a>
          <a href="#about" id="about-link" class="link">About</a>
          <a href="#support" class="link">Support</a>
          <a href="#blog" class="link">Blog</a>
          <a href="#tools" class="link">Tools</a>  
          <a href="#base" class="link">Base</a>
          <a href="#custom" class="link">Custom</a>
          <a href="#testimonials" class="link">Testimonials</a>
          <a href="#more" class="link">More</a>
      </div>
    </div>
        
    </wrapper>
        
    
    <!-- SCRIPT -->
              
        
    <!-- HORIZONTAL MENU BEHAVIOR -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script>
 
    <script>
        
        ScrollTrigger.create({
 
          trigger: "section#about",
 
          start: "top bottom",   
 
          onEnter: () => {
            gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#about-link", offsetX: 0}, ease: "none"} );
          },
 
          onLeaveBack: () => {
            gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#home-link", offsetX: 0}, ease: "none"} );
          }
 
        });
 
    </script>
 
    </body>
    
</html>
  • Like 2
Link to comment
Share on other sites

Hi Paul,

that's great! I have it working on my original build now. It's taken a few hours of trying different things within the code but eventually I decided to rebuild the scrolling menu as a much simpler version based on the code I uploaded to code pen yesterday and now it's all working really well, so thank you very much for all your help, I really do appreciate it.

One final question is that if I wanted to repeat the action I have working when the user scrolls down to the about section  (i.e. the menu slides to the left) on another link in the menu, like the 'Tools' one, so that it too slides to the left when the user scrolls to that point on the page...how would I acheive that? I'm assuming it's not just as simple as copying the javascript code for the about-link and referencing it to a 'tools-link' ID?

Thanks,
Marc

Link to comment
Share on other sites

 

In this case, I see no problem, reproducing the same procedure, that was applied before, for that new case.

 

Means, add an ID to your tools-link

 

<a href="#tools" id="tools-link" class="link">Tools</a>  

 

and create a second ScrollTrigger similar to the first one, but with adjusted values

 

ScrollTrigger.create({
  
  trigger: "section#tools",
  
  start: "top bottom",   
    
  onEnter: () => {
    gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#tools-link", offsetX: 0}, ease: "none"} );
  },
  
  onLeaveBack: () => {
    gsap.to('#scrollmenu', { duration: 0.5, delay: 0.0, scrollTo: {x: "#about-link", offsetX: 0}, ease: "none"} );
  }

})

 

 

Again, I see no problem, doing it like this in this scenario, because it is just those two cases.

 

If you wanted to do it for ALL the links, though, you'd probably be better off, doing things a bit different - but that'd be a whole new topic for you to dive in.

 

Try out this suggestion and see, if it fits your needs :)

 

 

See the Pen 6eee8c2a09edf95cd658cff8c8da9cc9 by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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