Initiate movement upon scrolling

I would like to activate this box animation once the user scrolls down by adding a class.

I'm having trouble getting this to work, it seems like I might be missing something crucial. Here is my current code, can someone point out where I am going wrong? Thank you!

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
    <rect class="box" x="147.297" y="237.162" fill="#FFFFFF" stroke="#000000" stroke-width="8" stroke-miterlimit="10" width="305.405" height="125.676"/>
</svg>

CSS

     @keyframes offset{
    100%{
      stroke-dashoffset:0;
    }
  }

.box{
    stroke:transparent;
}
  .box.draw{
    stroke:#202020;
    stroke-width:5;
    stroke-dasharray:910;
    stroke-dashoffset:910;
    animation: offset 5s linear forwards;
  }

jQuery/JS

$(function() {
    var boxDraw = $(".box");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 400) {
            box.addClass("draw");
        } 
    });
});

Furthermore, is there a way to trigger an animation after reaching a specific point on the page rather than using a scroll value? Any assistance would be greatly appreciated.

javascriptjqueryhtmlcsssquarespace

Answer №1

@Capsule has successfully solved the problem. Here is the correct JavaScript code:

$(function() {
    var boxDraw = $(".box");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 400) {
            boxDraw.addClass("draw");
        } 
    });
});

If you want to trigger the scroll when a specific element comes into view, @Capsule mentioned it earlier, but here is the code again:

$(function() {
    var boxDraw = $(".box");
    var boxDrawTop = boxDraw.offset().top;
    var windowHeight = $(window).height();

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        // Activate animation when .box is in view

        if (scroll >= (boxDrawTop - windowHeight)) {
            boxDraw.addClass("draw");
        } 
    });
});

Answer №2

look up the wow.js JavaScript library (additional text related to searching...)

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

Incorporating a variable within an HTML document without the need for

Here's a snippet of HTML code I'm working with: <body> <table width="650"> <tr width="650"> <td width="650"> lots of text here </td> </tr> </table> </body> Is there a way I can use a variable or c ...

html

What is the correct CSS2 selector syntax to apply the :hover effect to the nth child of a specific element?

My goal is to apply a unique background color to each menu li element when hovered over, and I want to accomplish this using CSS2. <ul> <li> <li> <li> <li> </ul> I managed to add a background color to t ...

csscss-selectors

Is Cookie-session the most ideal choice for React applications?

My NodeJS application currently authenticates users through a third-party app. Once the app retrieves user data, a cookie is generated and sent to the client for React to access the user data from that Cookie. Should I stick with using cookies or consi ...

javascriptnode.jssecurityexpresssession-cookies

What is the best method for conducting comprehensive testing of all projects and libraries within NestJS (nx)?

Our NestJS project has been established with multiple libraries through Nx. We have successfully run tests on individual projects/libraries using the following command: npx nx test lib1 --coverage While this method works well, we are faced with numerous l ...

javascriptnode.jstypescriptnestjsnomachine-nx

Polymer event / callback for appending new child nodes

My current project involves creating a custom element, let's call it <parent-element>, that performs specific actions based on the presence of its childNodes. When I define the element like this: <parent-element> <div> </div&g ...

javascripthtmlpolymerweb-componentmutation-observers

How can I center align my loader inside app-root in Angular2+?

I've successfully added a basic spinner to my <app-root> in the index.html file. This gives the appearance that something is happening behind the scenes while waiting for my app to fully load, rather than showing a blank white page. However, I& ...

javascripthtmlcssangulartypescript

Ways to customize a bot's status based on the time of day

I'm currently working on enhancing my discord bot by having its status change every hour for a more dynamic user experience. However, I'm facing challenges with JavaScript dates. Can anyone provide some guidance? Below is the snippet of code I ha ...

javascriptnode.jsnpmdiscord.js

ESLint detects the error "screen not found in @testing-library/vue"

When trying to utilize @testing-library/vue with the screen method imported, I encountered an error from ESLint stating: "screen not found in @testing-library/vue". // The render function doesn't give an error but screen does import { render ...

javascriptvue.jsvuejs2react-testing-libraryvue-testing-library

What is the best way to make a child div's height match its parent's height?

I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...

htmlcss

Leveraging the power of typeahead bloodhound to efficiently manage searched items with multiple aliases or synonyms

I'm currently working on incorporating a feature similar to the tag suggestion input field on Stack Overflow. My database consists of two tables: one for tags and another for tag aliases, or tag synonyms (tagSynonyms). As users type in a term, I want ...

jqueryjquery-pluginsautocompletetypeahead.jsbloodhound

Is it possible to use jQuery to submit a form and receive feedback in an iframe once

When uploading a photo, I use a form to submit it to an iframe. Here is the form: <form method="post" enctype="multipart/form-data" action="upload_images.php" target="iframe_pp_upload" id="dd_form"> <input type="file" id="dd_upload" name="fil ...

phpjqueryajaxiframe

The functionality of Nodejs exec is malfunctioning

I need assistance with executing DOS commands using the exec function: java -jar D:\selenium\selenium-server-standalone-2.40.0.jar -htmlSuite "*firefox3 C:\Users\AppData\Local\Mozilla Firefox\firefox.exe" "http://google. ...

javascriptnode.jsseleniumexecdos

What could be causing this error to appear when using Next.js middleware?

The Issue at Hand Currently, I am in the process of setting up an authentication system using Next.js, Prisma, and NextAuth's Email Provider strategy. My goal is to implement Next.js middleware to redirect any requests that do not have a valid sessio ...

javascriptnode.jsnext.jsmiddlewarenext-auth

Having issues with socket.io connectivity on my Node server

I am setting up my node server to update all connected clients with real-time information. However, when I run the code provided below, the io.sockets.on('connection') callback keeps firing constantly, flooding the console with the message Client ...

javascriptnode.jssocketsexpresssocket.io

A single button that performs multiple actions with just one click

Summary: Seeking assistance in implementing a button that triggers three different actions upon being clicked thrice. Detailed description: On one page of my website, there is an introduction with text and images. I currently have a button that switches t ...

javascriptjqueryhtmlbutton

What's the best way to retrieve the id or index of a card within a list?

Struggling to fetch the id's of documents retrieved from a MongoDB database and displayed on React and Material-Ui cards. Tried logging id in functions and APIs, but receiving 'undefined' or metadata from the delete function. Delete functi ...

javascriptreactjsmongodbmaterial-ui

Top method for converting scrolling into an element

When trying to create a scrollable element, I attempted the following: .scroll-content { overflow: hidden; } .scrollabe { overflow-y: scroll; } <ion-content> <ion-grid style="height:100%" *ngIf="plat && ticket"& ...

htmlcssangularionic-framework

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

javascripthtmlcss

Fetch data using Ajax without the need for a hash signal

My current goal is to load content through Ajax on a website. Let's say our main page is example.com/blankpage (I've eliminated the .html extension using htaccess). At the moment, I have it set up so that when a link on the page directs to mysite ...

javascripthtmlajax

What is the best way to achieve this in Node.js/Express using Redis? Essentially, it involves saving a callback value to a variable

Here is the data structure I have set up in redis. I am looking to retrieve all values from the list and their corresponding information from other sets. Data structure : lpush mylist test1 lpush mylist test2 lpush mylist test3 set test1 "test1 value1" ...

javascriptjquerynode.jsexpress