Wow JS does not seem to be compatible with one-page scrolling feature

I have been using a plugin found at for my website.

Whenever I switch slides, I want all elements within each section to have animations using another plugin I found here: https://github.com/matthieua/WOW

In the past, I've had success with WOW JS, but when I try to combine it with ONEPAGE SCROLL, it doesn't work properly. Only the first element shows correctly, while the rest do not display as expected.

If anyone has any idea on how to fix this issue, I would greatly appreciate it!

Thank you in advance.

jquerycssscrollwow.js

Answer №1

It has been noted by @Burimi that onepage scroll does not actually scroll the site, but instead utilizes the property translate3d in the plugin's container.

I recommend utilizing fullPage.js which addresses this issue by including the option scrollBar:true, as demonstrated in this example, offering a improved user experience while retaining the scroll bar.

As detailed in fullPage.js FAQs:

Parallax, along with other plugins relying on the site's scrolling, monitors the scrollTop property of JavaScript. fullPage.js does not physically scroll the site; rather it adjusts the top or translate3d properties. It will only truly scroll the site if using the fullPage.js option scrollBar:true or autoScrolling:false to ensure compatibility with the scrollTop property.

If you opt not to use the scrollBar option, you can still utilize callbacks like afterLoad or onLeave as outlined in the documentation.

In addition, fullPage.js offers support for older browsers such as IE7 and Opera 12, along with providing a range of helpful options.

Answer №2

The reason for this is that the OnePage Scroll plugin does not activate a regular browser scroll. Therefore, in order to trigger WOW Animations, you will need to utilize the afterMove event of OnePage Scroll.

$(".main").onepage_scroll({
    afterMove : function(index){
        var this_slide = $(".main").eq(index);
        //You have the ability to manually animate this_slide - refer to the WOW Documentation for more information
    }
});

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

Initiate the Photoswipe gallery with a single click of a link

I am currently using the photoswipe plugin on my website. I have set up some options and initialized it with a group of images. (function(window, PhotoSwipe){ document.addEventListener('DOMContentLoaded', function() { var options = { ...

jqueryphotoswipe

Align the text at the center within a relative div without specifying its size

In the structure of my HTML, I have the following simplified layout: <table> <tr> <td> <div class="PromptContainer"> <span class="Prompt">Prompt text</span> </div> <input type="t ...

htmlcsspositioningcss-positionvariable-length

Struggling to make the text color change when hovering

On my website, I added a tab called newarrival at the top of the page. When you hover over this tab, I want the text to turn blue to indicate that it's a link. However, despite my efforts, it doesn't seem to be working as expected. You can see th ...

csscolorshover

Utilizing SASS in Eclipse for Java EE Development

Although I have already looked at this Stack Overflow question, it did not provide the solution I am seeking. As a Java Web Developer, I have been utilizing Less for my CSS pre-processing needs. However, I am now interested in transitioning to Sass due to ...

javacsseclipsesass

Using CSS to cut out a triangle shape from an image

Our designer has a vision for this: However, I'm struggling to find a suitable method for creating the triangle crop effect: Implementing an :after element that spans the entire width and utilizes border tricks to form a triangle shape Creating a l ...

cssimagepositioncrop

Interactive Jquery slider that moves based on mouse movement

Does anyone know of a jquery slider script that allows for horizontal sliding when moving the mouse? I am looking to achieve an effect similar to the one shown in this example, but specifically scrolling from right to left. ...

jquerymousemoveslide

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Upon inspecting the generated project, I noticed a multitude of color variables such as --bs-body-bg. The developer tools indicate it is in _root.scss, however, that file appears to be non-existent and I suspect those variables may actually reside within b ...

cssbootstrap-4blazorblazor-server-side

How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below: <div class="row mx-5 my-5 h-75 w-80"> <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advanc ...

cssangulartwitter-bootstrap-3responsive-designbootstrap-4

Changing Json Data into SQL Database Table

I'm looking for a way to dynamically generate SQL queries. I came across this helpful tool: http://querybuilder.js.org/demo.html Here is the JSON object I have: { "condition": "AND", "rules": [ { "id": "name", "field": "name", ...

javascriptjquerysqljsonquery-builder

How to Use Jquery to Track Mouse Movement Over a PNG Image

Need help with this issue Link to Example The first image is a puzzle, The second image is of earth. I can rotate, drag, and resize the earth image, but it appears behind the puzzle image. While I can interact with the puzzle image, I cannot move or ro ...

jqueryjquery-ui

Strange behavior exhibited by Ajax in Internet Explorer 8

Below is the function I have implemented to ajax more reviews: function retrieveAdditionalReviews(str) { var counter = Number($('#counter').val()); var xmlhttp; if (str == "") { document.getElementById("reviews").innerHTML = ...

javascriptjqueryajaxinternet-explorer-8

When the jQuery button is clicked, the execute function will run multiple times

I am attempting to create a button using jQuery that calls a JavaScript function, but I am facing an issue : Upon loading the page, the first click on mybutton does not elicit any response The second click results in the function being executed twice On ...

javascriptjquery

Enhance the styling of elements generated through JavaScript in VueJs with custom CSS

I need help applying CSS to elements that I dynamically created using JavaScript. buttonClicked(event) { console.log(event); let x = event.clientX - event.target.offsetLeft; let y = event.clientY - event.target.offsetTop; let ripples = document.cre ...

javascripthtmlcssvue.jsvuejs2

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext

Several dropdown menus within the same container, working independently of each other

I recently encountered an issue with a drop-down navigation bar. When I have multiple drop-downs and click on one, it opens as expected. However, if I then proceed to click on another drop-down while the first one is already open, both of them remain open ...

javascriptjqueryhtmlcss

Display Text Only When Selected - Material-UI

Is there a way to display only the selected tab's text? I came across this code snippet in the MUI documentation that involves showing labels on selection. How can I achieve this effect, maybe by manipulating the state to change the color of the selec ...

cssreactjsmaterial-ui

What could be causing my CSS style to not take precedence over Bootstrap in this particular case?

I am struggling to make my CSS styles take precedence over Bootstrap's defaults for aligning table headers. Below is the code for my table: <table class="userProjectsTable" id="userLeadProjectsTable"> <tr class="userProjectsHeaderRow" i ...

htmlcsstwitter-bootstrap

Ways to extend div to fill the rest of the page's vertical space

Apologies, my search has yielded many results, but none that directly address my specific issue. It appears that there is a proliferation of div-height problems on this platform. :-( Here is the layout I am working with for testing purposes: <!DOCTYPE ...

javascriptjqueryhtmlcssheight

Display a Div when an image is clicked using JavaScript

I am attempting to create a clickable image that reveals a div when clicked. The catch is that the div can only be shown by clicking the image, not hidden again. Clicking on another image will replace the existing div with a new one. I was able to achieve ...

javascripthtmljquerycss

Changing the dimensions of the table border and its color in DataTables

Looking at the provided table structure: library(DT) datatable( iris, style = "default", filter = "top", class = "hover stripe compact" ) I successfully modified the footer border with the following CSS code: table.dataTable.no-footer { bor ...

cssrdatatablesdt