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

Encountering a 404 Not Found issue while trying to add scripts with Node.js

I am currently working with a node server and an HTML file, where the default route is being directed. server.js /** * Created by Creative Coder on 10/26/2015. */ var express = require('express'); var mysql = require('mysql'); var a ...

htmlangularjsnode.jsexpress

When the value of a Formcontrol is changed using valueAccessor.writeValue(), it remains unchanged

Encountering a similar issue as seen in this stack overflow post, but the solution provided isn't resolving the issue. Perhaps you can offer assistance on that thread. In my scenario, I have created a directive for formatting phone numbers: import { ...

javascriptangularfrontenddirective

The POST response I received was garbled and corrupted

Operating under the name DownloadZipFile, my service compiles data and constructs a Zip file for easy downloading. This particular service provides a response that contains the stream leading to the file. A Glimpse of the Service: [HttpPost] public Actio ...

javascriptc#ajaxpostblob

Having trouble accessing information from Firebase Realtime Database within a React Native application

I am currently developing a React Native application that interacts with a Firebase database for reading and writing data. I have configured my Firebase permissions to allow read and write access: { "rules": { ".read": true, ...

javascriptreactjsfirebasereact-nativefirebase-realtime-database

"Mastering the art of passing variables within the index parameter for JavaScript push method

I need help passing a variable inside index in JavaScript push while working with Angular. Here is my current code: angular.forEach(Val, function (Value,Key) { angular.forEach(Value, function (Value1,Key1) { saveDetailArr.push({ 'option_i ...

javascriptarraysangularjsforeach

Tips to enhance web page loading speed when parsing JSON data from a URL

While extracting data from a JSON file accessed via URL, I am experiencing long loading times. Surprisingly, the website manages to display the same data only when it's ready, and I aspire to achieve a similar functionality. I have yet to discover a ...

phphtmljson

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

Incorrect Reactjs installation technique

When I try to run create-react-app on my Windows PC, only dependencies are being installed with no folders other than node_modules. Even when using Yarn, I haven't been able to progress further. Please assist and thank you in advance for any help. Thi ...

javascriptnode.jsreactjs

VueJS together with Firebase: The guide to password validation

I am currently working on a web form developed using VueJS that enables authenticated users to modify their passwords. The backend system relies on Firebase, and I am facing a challenge in validating the user's current password before initiating the p ...

javascriptfirebasevue.jsfirebase-authentication

Issue with React / Express failing to route links accurately

Currently, my React project is functioning well except for Express. I have been struggling to find comprehensive tutorials on implementing correct routing with Express in a MERN stack application. I have come across some Stack Overflow posts, but none of ...

javascriptnode.jsreactjsexpressreact-router

Exploring the ins and outs of webpage loading speed

I am working on writing JavaScript code that includes a button to open a webpage of my choice. I now want to understand how to detect when the page I called is finished loading. Any suggestions or ideas on this topic? I apologize if my explanation was no ...

javascripthtmlcss

Transferring a single dataset from a table to a pop-up modal using Angular

I am working on a table to display entries for a contest, extracted from a database using PHP and converted into a .json object for AngularJS and JavaScript. I want to add a modal feature so that when a "judge" clicks on an entry, they can view its details ...

javascriptangularjsui.bootstrap

Leverage the hidden glitch lurking within Vue

While working with SCSS in vue-cli3, I encountered a strange bug where using /deep/ would result in errors that I prefer not to deal with. Code Running Environment: vue-cli3 + vant + scss CSS: /deep/ .van-tabs__content.van-tabs__content--animated, .va ...

javascriptvue.jswebpacksassvue-cli-3

What is the best way to ensure that a specific number of XHR callbacks have successfully completed before proceeding with further actions?

I have four requests that each have their own callback and can fire in any order. However, I need all the callbacks to finish successfully before executing mergeData. The issue with my current approach is that the initial parameter values do not refresh ...

javascriptajaxcallback

<JavaScript> changing the color of hyperlink in d3.js - <Organizational Chart>

screenshot The width of the link can be adjusted, but the color remains unchanged. I have attempted various solutions series.links.template.setAll({ strokeWidth: 2, strokeOpacity: 0.5, color: am5.color('#ffffff'), links: ...

javascriptreactjsamchartsamcharts5

Guide to adding Angular 2 components to various locations in the DOM of a vanilla JavaScript webpage

Scenario: A customer is interested in creating a library of Angular 2 components that offer a technology-agnostic interface to developers. This allows developers to use plain JavaScript without needing knowledge of the internal workings of the library. Th ...

javascriptangularwrapper

Issues observed when implementing replaceWith() to replace text tags with input field on a web page

Just a simple EDIT request. I want to modify the headers so that when I click on the "edit" icon, the header will change to a text field and the "edit" icon will switch to a "save" icon. $('#editheader').click(function(e){ va ...

jqueryhtmlcss

Is it possible to capture a submit event from a form within an iframe using jQuery or JavaScript

If I have a webpage with an embedded iframe containing a form, how can I update a hidden field value on the main page once the form is submitted? What is the best way to trigger an event in the parent page upon form submission? Here's a simplified ex ...

javascriptjquery

Minimize the space between flex items

I'm currently working with a <div> container styled as flex using the following CSS properties: .icon-container { padding: 3px; padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: column; align-content ...

htmlcssflexbox

Tips for getting involved in the Mojito repository on Github for javascript development

Looking for guidance on studying, understanding, and debugging code? I have a good grasp of javascript but unsure where to begin. I am familiar with Github and Mojito, but struggling to contribute to the platform. Any tips on how to get started with Moji ...

javascriptnode.jsnpmyahoomojito