I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

I'm currently making updates to my portfolio website, but for some reason, the scroll reveal animation has suddenly stopped working. I made a few edits and now it seems to be broken.

/*===== SCROLL REVEAL ANIMATION =====*/
const sr = ScrollReveal({
  origin: 'top',
  distance: '80px',
  duration: 2000,
  reset: true
});

/*SCROLL HOME*/
sr.reveal('.home__title', {});
sr.reveal('.button', {
  delay: 200
});
sr.reveal('.button1') {
delay: 300
});
sr.reveal('.button3') {
delay: 400
});
sr.reveal('.home__social-icon', {
  interval: 200
});

/*SCROLL ABOUT*/
sr.reveal('.about__img', {});
sr.reveal('.about__subtitle', {
  delay: 400
});
sr.reveal('.about__text', {
  delay: 400
});

/*SCROLL SKILLS*/
sr.reveal('.skills__subtitle', {});
sr.reveal('.skills__text', {});
sr.reveal('.skills__data', {
  interval: 200
});
sr.reveal('.skills__img', {
  delay: 600
});

/*SCROLL WORK*/
sr.reveal('.work__img', {
  interval: 200
});

/*SCROLL CONTACT*/
sr.reveal('.social__input', {
  interval: 200
});
<link href='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2334252f23223f0c7e627c6279">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>

<title>Portfolio</title>
<!--===== HEADER =====-->
<header class="l-header">
  <nav class="nav bd-grid">
    <div>
      <a href="#" class="nav__logo">Caleb</a>


    </div>

    <div class="nav__menu" id="nav-menu">
      <ul class="nav__list">
        <li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
        <li class="nav__item"><a href="#about" class="nav__link">About</a></li>
        <li class="nav__item"><a href="#skills" class="nav__link">Grade</a></li>
        <li class="nav__item"><a href="#work" class="nav__link">Subjects</a></li>
        <li class="nav__item"><a href="#social" class="nav__link">Social</a></li>
      </ul>
    </div>

    <div class="nav__toggle" id="nav-toggle">
      <i class='bx bx-menu'></i>
    </div>
  </nav>
</header>

<main class="l-main">
  <!--===== HOME =====-->
  <section class="home bd-grid" id="home">
    <div class="home__data">
      <h1 style="text-align: center;" class="home__title"><br>Welcome,<br> <span class="home__title-color">10-Sapphire</span></h1>




      <a target="_blank" href="My Favorite Poems.docx" class="button">Online Regulations
                        <p id="settings-note">*Download here</p></a>


      <a target="_blank" href="My Favorite Poems.docx" class="button1">Online Regulations
                        <p id="settings-note">*Download here</p></a>

      <a target="_blank" href="My Favorite Poems.docx" class="button3">Online Regulations
                        <p id="settings-note">*Download here</p></a>

    </div>


    <div class="home__social">
      <a style="position:absolute; left: 19%;" target="_blank" href="https://www.facebook.com/groups/747714555769692/" class="home__social-icon"><i class='bx bxl-facebook'></i></a>
      <a style="position:absolute; left: 48%;" target="_blank" href="https://classroom.google.com/u/2/c/MTE2NTUyMzQxMDIz" class="home__social-icon"><i class='bx bxl-google' ></i></a>
      <a style="position:absolute; right: 14%;" target="_blank" href="https://twitter.com/olivarezxc?s=09" class="home__social-icon"><i class='bx bxl-twitter' ></i></a>

    </div>

  </section>

  <!--===== ABOUT =====-->
  <section class="about section " id="about">
    <h2 class="section-title">About</h2>

    <div class="about__container bd-grid">
      <div class="about__img">
        <img src="assets/img/me.jpg" alt="">
      </div>

      <div>
        <h2 class="about__subtitle">I'am Caleb</h2>
        <p class="about__text"> (you want to say)</p>
      </div>
    </div>
  </section>

  <!--===== SKILLS =====-->
  <section class="skills section" id="skills">
    <h2 class="section-title">Grades</h2>

    <div class="skills__container bd-grid">
      <div>
        <h2 class="skills__subtitle">Grading System</h2>
        <p class="skills__text">This is the percentage of your incoming grades.</p>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxl-html5 skills__icon'></i>
            <span class="skills__name">ATTENDANCE</span>
          </div>
          <div class="skills__bar skills__attendance">

          </div>
          <div>
            <span class="skills__percentage">30%</span>
          </div>
        </div>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxl-css3 skills__icon'></i>
            <span class="skills__name">QUIZ</span>
          </div>
          <div class="skills__bar skills__quiz">

          </div>
          <div>
            <span class="skills__percentage">20%</span>
          </div>
        </div>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxl-javascript skills__icon'></i>
            <span class="skills__name">MODULE</span>
          </div>
          <div class="skills__bar skills__module">

          </div>
          <div>
            <span class="skills__percentage">25%</span>
          </div>
        </div>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxs-paint skills__icon'></i>
            <span class="skills__part">PARTICIPATION</span>
          </div>
          <div class="skills__bar skills__total">

          </div>
          <div>
            <span class="skills__percentage">25%</span>
          </div>
        </div>
      </div>


      <div>
        <img src="assets/img/work3.jpg" alt="" class="skills__img">
      </div>






    </div>
  </section>

  <!--===== WORK =====-->
  <section class="work section" id="work">
    <h2 class="section-title">Subjects</h2>

    <div class="work__container bd-grid">
      <div class="work__img">
        <a href="inside.html"><img src="assets/img/work1.jpg"> </a>

      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/lab-dash.jpg"> </a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/snake.png"></a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/dash.jpg"></a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/pdf-report.jpg"></a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/sample-form.jpg"></a>
      </div>
    </div>
  </section>

</main>



<!--===== FOOTER =====-->
<footer class="footer">
  <p class="footer__title" id="social">Social</p>
  <div class="footer__social">
    <a href="#" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
    <a href="#" class="footer__icon"><i class='bx bxl-google' ></i></a>
    <a href="#" class="footer__icon"><i class='bx bxl-twitter' ></i></a>



  </div>
  <p>&#169; 2020 copyright all right reserved</p>


</footer>

javascripthtmlcss

Answer №1

The configuration of buttons button1 and button3 in lines 14,17 of your javascript code contains a syntax error. You can correct this issue by removing those lines and replacing them with the following:

sr.reveal('.button1',{delay: 300});
sr.reveal('.button3',{delay: 400});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CKFinder Error: Unable to find definition for t.event.special.swipe

Upon using CKFinder 3.2.0 with Firefox 44.0, I encountered the following error message. Interestingly, this issue is exclusive to Firefox while Chrome works perfectly fine. Any insights on what could be causing this problem and how it can be resolved? Ty ...

javascriptjqueryjquery-mobileckeditorckfinder

Exception in posting strings or JSON with react.js

Whenever a user clicks on the Signup button, the process I follow to create an account is as follows: Firstly, a new User entry is created in the database. createUser = () =>{ var xhr = new XMLHttpRequest(); xhr.open('POST', 'http:// ...

javascriptreactjsspringspring-bootxmlhttprequest

Issues with jQuery spinner not currently active

For quite some time, I had this code working perfectly in my Rails application: $(function () { // Modifying the link's icon while the request is in progress $(document).on('click', 'a[data-remote]', function () { ...

javascriptjqueryruby-on-railsajax

Having trouble clicking or interacting with JavaScript using Selenium and Python

Issue: Unable to interact with elements on a specific webpage after opening a new tab. Using WebDriver Chrome. I can successfully navigate the initial webpage until I click a link that opens a new tab, at which point I am unable to perform any actions. ...

javascriptpython-3.xseleniumselenium-webdriver

Duplicate data insertion issue encountered when choosing from table utilizing checkbox

I'm having issues with the loop in this code. Whenever I select data from a table using checkboxes (which is generated using JSON), the selected data gets added multiple times. What could be causing the problem in this code snippet that loops through ...

javascriptjqueryjsonloops

jQuery plugin that controls scrolling speed using the mousewheel

I am trying to replicate the header design of Google+ which includes a search bar that moves when scrolling. Specifically, when the user scrolls down, the search bar shifts to top:-60px and the second horizontal menu shifts from top:60px to top:0 becoming ...

javascriptjqueryscrollmousewheel

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

phpcsswordpress

Tips for identifying a scroll down gesture on a touch device with jQuery

I have a method for infinite scroll that is triggered like this: $(window).on('scroll resize load', function() { // execute the infinite scroll method }); It is triggered by these events: scroll resize load However, it does not seem to ...

javascriptjqueryiphoneeventstouch

What steps should I follow to enable a tooltip in this specific situation using qtip?

In my database, I have tables for venues, venue types, and map icons with the following relationships: A venue belongs to a venue type A venue type belongs to a map icon Each venue result is shown on the index page as a partial. Each partial ...

javascriptjqueryruby-on-railsqtip2

Exploring the potential of Django to efficiently implement multiple listviews on a single webpage

Recently started working with Python and Django, but I may have bitten off more than I can chew. If anyone has the time to help educate me, I would greatly appreciate it. My main model deals with "work orders," each of which is linked to subsets of data. I ...

pythonhtmldjango

Retrieve a unified data array from the provided data source

Below is a snapshot of my data const data = [{"amount": "600,000", "cover": null, "id": "1", "img": "636e56de36301.1.png", "make": "bmw", "model": "bmw ...

javascriptnode.js

Dash: Streamlining the process of updating numerous elements within a callback

I am facing a challenge with my Dash app where I have multiple html.Div components that all look and are laid out similarly. When I click on a checkbox, I want all of these elements to be hidden. The common solution suggested is to create multiple outputs ...

pythonhtmlcssplotly-dashdashboard

JavaScript Image Swap

I tried implementing this script but it didn't work for me. I'm not sure what to do next, so I'm reaching out for help. The script is at the top of the page, followed by a picture with an id that I'd like to change when a button below i ...

javascripthtmlcss

Encountering the error "Cannot access property 'stroke' of undefined" when utilizing constructors in React and p5

Hi there, I'm having trouble with my React code and could really use some assistance. Being new to React, I'm trying to create a collision system between multiple bubbles in an array, but I keep running into this undefined error: import React, ...

javascriptreactjs

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

I am currently experimenting with NextJs and Tailwinds CSS for a new project. However, I keep encountering an error when attempting to apply a custom background color: Failed to compile ./styles/globals.css:7:12 Syntax error: /Users/anishkunapareddy/Deskto ...

cssreactjscolorsnext.jstailwind-css

Bizarre Actions of a JavaScript Object

Currently, I am in the process of developing a Multiplayer game using Phaser and Eureca io. My main focus right now is on perfecting the authentication of players and their controls. To achieve this, I have implemented a method on the server that retrieves ...

javascripthtmlfunctionobjectphaser-framework

Do not fetch data again after a re-render

My code is facing an issue where every time I click toggle, the Child component re-renders and triggers another API request. My goal is to fetch the data once and then keep using it even after subsequent re-renders. Check out the CodeSandbox here! functio ...

javascriptreactjsfetch-api

Encountering difficulties accessing Node.JS Sessions

Hey there, I am currently working on integrating an angular application with Node.js as the backend. I have set up sessions in Angular JS and created my own factory for managing this. Additionally, I am utilizing socket.io in my Node.js server and handling ...

javascriptangularjsnode.jssession

Maximizing performance: optimizing Javascript usage in .net Web Application

After completing a web application using C#, ASP, and some javascript, my main page is cluttered with a mix of javascript/jQuery at the bottom. I have several ajax calls to web methods in this mess. Is there a way to organize this javascript into multipl ...

javascriptc#jqueryasp.net

Obtain the maximum or minimum value from an associative array using a function and provided parameters

Here is the code I have so far: <!DOCTYPE html> <html> <body> <button onclick="scanarray('a', 'max')">Test with a, max</button> <button onclick="scanarray('b', 'min')">Test with ...

javascriptarraysfunctionparameters