I want to Apply Hash Navigation on GSPA Animation

November 22, 2024

Hi,

I am stuck in a position where I need some help.

I am currently using using these scripts on my webflow website:

This is the working Animation and It works perfectly

https://www.judexaya.com/anomalies

But one I use a Hash link to navigate to my slide, it show the correct slide but then the animation breaks and It won't work. Neither the scroll works nor the Navigation buttons works.

Here is the link to the Problem :

https://judexaya.webflow.io/anomalies#ZENITH

Is there any way to fix this problem?

I want the animation to work even with the URL with hash.

November 22, 2024

Hi @techbyusman and welcome to the GSAP Forums!

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue?

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo:

Using a framework/library like React, Vue, Next, etc.?

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins:

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files.

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Is worth noticing that, according to the code you posted you have mismatching versions of GSAP and the Plugins:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<!-- Mismatching version below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Observer.min.js"></script>

Also the recommendation would always use the latest version (3.12.5).

Finally the Observer code is working when going directly to the site with the hash on the URL, I can see the image disappear and the active indicator on the side changing and if you inspect with devtools (some of the first things you should always do) you'll see that the slide's opacity is 0:

At that point the opacity should be 1 since is the active one as I scrolled down with my mouse wheel, so I believe your issue is somewhere in your initial load and how are you handling that in particular, based on the hash.

November 22, 2024

Thanks for the reply. I wanted to ask If the Hash would work for my slide?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anomalies Page</title>
  <style>
    html, body {
      overflow: hidden;
    }

    .main-wrapper {
      overflow-x: hidden;
    }

    .slide__content-title {
      font-size: 20px !important;
    }

    /* Ensure progress bar transitions smoothly */
    .slider_progress-bar {
      width: 0%;
      height: 0.25px; /* Example height, adjust as needed */
      background-color: white; /* Adjust color as needed */
      transition: width 2000ms ease;
      z-index: 100; /* Ensure it's on top of other elements */
    }
       
  
    /* Fade-in and fade-out animation keyframes */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Apply fade animations */
.fade-in {
  animation: fadeIn 0.5s forwards; /* Adjust duration as needed */
}

.fade-out {
  animation: fadeOut 0.5s forwards; /* Adjust duration as needed */
}
  </style>

  <!-- GSAP and other necessary libraries at the top of the body -->
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Observer.min.js"></script>
  
  <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
  
  <script src="https://qe6cmz.csb.app/script.js"></script>

</head>
<body>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Map button IDs to slide IDs
    const slideMap = {
      "TETRA-CHAIR": "slide1",
      "TETRA-OBELISK": "slide2",
      "ZENITH": "slide3",
      "MONAD": "slide4",
      "SOLARIS": "slide5",
      "INFERNUM": "slide6",
      "PLUTO": "slide7",
      "AXIOM": "slide8",
      "HELIO": "slide9",
      "FWRC": "slide10",
    };

    // Function to show a specific slide
    function showSlide(targetSlideID) {
      const slides = document.querySelectorAll(".slide");
      slides.forEach((slide) => {
        if (slide.id === targetSlideID) {
          slide.classList.add("slide--current");
          slide.style.opacity = "1"; // Show the current slide
        } else {
          slide.classList.remove("slide--current");
          slide.style.opacity = "0"; // Hide all other slides
        }
      });
    }

    // Function to handle hash-based navigation
    function handleHashNavigation() {
      const hash = window.location.hash.substring(1); // Get the hash without the "#"
      console.log("Current Hash:", hash); // Debugging: Log the hash
      if (hash && slideMap[hash]) {
        const targetSlideID = slideMap[hash];
        console.log("Navigating to Slide:", targetSlideID); // Debugging: Log the slide ID
        showSlide(targetSlideID);
      } else {
        console.warn("No valid hash or slide found"); // Debugging: Log if hash is invalid
      }
    }

    // Handle hash navigation on page load
    handleHashNavigation();

    // Handle hashchange events
    window.addEventListener("hashchange", handleHashNavigation);
  });
</script>

This is the code I am have in my body tag.

and this is the code I have in my Head tag:

<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting-cells.css" />
<style>
  .cursor__text {
    display: inline-block; /* Ensure text is inline */
    writing-mode: horizontal-tb; /* Ensure horizontal text */
    text-orientation: mixed; /* Ensure horizontal orientation */
    transform: none; /* Remove any transforms affecting orientation */
    position: absolute; /* Position it absolutely */
    top: 0; /* Adjust as necessary */
    left: 0; /* Adjust as necessary */
    color: rgba(255, 255, 255, 0.45); /* Example color */
    font-size: 12px; /* Example font size */
    pointer-events: none; /* Ensure cursor text doesn't interfere with interactions */
    white-space: nowrap; /* Ensure text stays in one line */
  }
</style>
<style>
  /* Frame navigation button initial state */
  .frame__nav-button {
    color: rgba(255, 255, 255, 0.45) !important; /* White with 45% opacity */
    transition: color 0.3s ease !important; /* Smooth transition for color change */
  }

  /* Frame navigation button hover state */
  .frame__nav-button:hover {
    color: rgba(255, 255, 255, 1) !important; /* White with 100% opacity on hover */
  }

  /* Frame navigation button active state */
  .frame__nav-button.frame__nav-button--current {
    color: rgba(255, 255, 255, 1) !important; /* White with 100% opacity when active */
  }
</style>
<style>
  .frame__back--show, .slide--current {
    opacity: 1;
  }
</style>
<style>
  .slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .slide--current {
    opacity: 1;
  }
</style>
<style>
  body {
      display: block !important;
  }
</style>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anomalies Page</title>
  <style>
    /* Add the progress bar styling here */
    .slider_progress-bar {
      width: 0%; /* This is dynamically updated by JavaScript */
      height: 0.25px; /* Set the desired thin height */
      background-color: white; /* The color of the progress bar */
      transition: width 2000ms ease;
      z-index: 100; /* Ensure it is above other elements */
    }
  </style>
</head>

Can you help me out please?

November 22, 2024

Sorry but the code snippet you posted doesn't really tells me a lot about what the issue could be in this case. Unfortunately there is nothing we can do to debug and try different solutions on a live site, since we can't tinker with the code in order to see what could be the issue and test possible solutions.

November 22, 2024

Ok thanks. But can tell me that the animation works with hash or not? So, I can remove he hash part.

November 22, 2024

Hi,

Is pretty obvious that is working, the problem is elsewhere and most likely related to some logic in your code and not a GSAP related issue (unless you can provide a minimal demo that clearly show us that is a GSAP issue):

https://i.imgur.com/2R0vCx8.mp4

As you can see here the slide that matches the hash has an opacity of 1 and the rest has an opacity of 0:

https://i.imgur.com/mGadzfJ.mp4

This is mostly about the inner logic you have in your code so you should definitely look into that.

Happy Tweening!

November 22, 2024

I figured out the problem and It was opacity that caused but now other problem has occur in my slide. Please check it here:https://judexaya.webflow.io/anomalies#MONAD

November 23, 2024

Hi,

Can you please help me out? The Gsap animation does not work with Hash as you can see here :https://judexaya.webflow.io/anomalies#ZENITH

November 23, 2024

Hi

Sorry about the issues you're dealing with, but as we have mentioned over and over, without a minimal demo (emphasis on minimal) that clearly illustrates the problem there's not much we can do. Is just impossible for us to debug a live production site.

November 23, 2024

Thanks for your motivation. I figured out the problem myself and now my animation works perfectly. The issue was the GSAP current animation was 0 so It always set show first slide. I dynamically calculated the slide number from Hash and put in the function which shows the current slide.

Notifications

Messages

I want to Apply Hash Navigation on GSPA Animation

Recommended Posts

techbyusman

GSAP Helper

techbyusman

GSAP Helper

techbyusman

Rodrigo

techbyusman

techbyusman

Rodrigo

techbyusman

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members