graingert / wow Goto Github PK
View Code? Open in Web Editor NEWThis project forked from matthieua/wow
Reveal CSS animation as you scroll down a page
Home Page: https://wowjs.uk
License: Other
This project forked from matthieua/wow
Reveal CSS animation as you scroll down a page
Home Page: https://wowjs.uk
License: Other
If the window size is high enough, then the objects that are in viewport will not be animated until the window size is reduced. This can be tracked if you open the site from your phone (full version of the site in your mobile browser)
Video:
https://yadi.sk/i/paifxQ7B7Xg2UQ
When we scroll the webpage having wow animations, while loading animations of the content, the website components get place wrongly , leaving a big temporary offset on X direction. when the animation gets completed , they get back to their desirable position again. This makes the website ugly on mobile devices, and We would like to have animations on mobile site.
I would like to know if a new version is expected to be launched, this project is very good.
I use wow to animates few element on my page with success.
I wish to use wow to trigger other js functions when item are visible.
I try to use callback option but it doesn't seams to work
var wow = new WOW(
{
callback: function(box) {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
console.log("!! WOW !!");
}
}
);
wow.init();
the animations are triggered, but nothing is logged
Hi Team,
I'm Using React JS
while calling this function
new WOW().init();
showing error like this
I'm Using Script and Css File
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" />
How to Resolve this Issue
Please, add the possibility to specialize an animation duration as an option in WOW object arguments.
How can I have this feature?
I want to load the animation only when the window or tab is focused. I don't want the animations to star immediately when I open the page on a new tab. Is there a way to do that? Thanks in advance.
"animation-fill-mode: both" attribute clashes with the boostrap 3 modal popups.
It causes the class "modal-backdrop" to appear in front of all the others
If you remove the css attribute, it causes the content to flicker once before loading.
n.b. I am using animate.css along with wow js.
Any solutions?
Hy guys,
I'm having this annoying effect where the div is shown before the animation starts resulting in an annoying effect. Look at this:
I'm using the default settings and these are the relevant DOM elements:
<div class="about-image wow fadeInRightBig text-center" data-wow-duration="1s" data-wow-delay="0s"
style="z-index: 90; filter: drop-shadow(0 0 30px #333);">
<img...>
</div>
<div class="text-center wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0s">
is that normal or is there something that goes in conflict? Thanks.
Hi! How can I set delay time between each iteration?
Hi there . Really like your wow project.
and may I ask is wow support latest version of Animate.css ?
here is the official website of Animate: https://animate.style/
I found that wow instructions running class is different than animate latest version.
Hello @graingert
First of all I have to say that my knowledge about licenses is practically inexistence.
I have found your code by googling. I have to say that it's works nicely. But reading your readme i look that you "forked" the code from another repository, that repository have a payment license but yours is MIT(Which I think that is free to use)..
How it can be?
Thanks for your work!
Greetings.
Hello, I have this:
<div class="container">
<div class="row">
<div class="col-lg-6">
<p>This text displays fine.</p>
</div>
<div class="col-lg-6">
<p>This text also displays fine.</p>
<p>In the image below, if I remove the wow class, I can see the image.
If I leave the wow class, the image is not displayed only when the
size of the window is md, for example, 977px wide.</p>
<img src="some-image.jpg"
class="img-fluid center-block wow fadeInRightBig"
data-wow-delay="0s"
data-wow-duration="1s"
data-wow-offset="200"
alt="Some image" />
</div>
</div>
</div>
In the image some-image.jpg, if I remove the wow class, I can see the image.
If I leave the wow class, the image is not displayed only when the size of the window is md, for example, 977px wide.
I tried removing the img-fluid and center-block classes but it still doesn't work.
It works fine in Bootstrap 3, the problem is only with bootstrap 4. I am using the latest version of wow.min.js and animate.css and bootstrap 4. Thanks.
I want to reveal animation , but there is a problem:
after animated, the wow elements area all visible,
then scroll down ,
then scroll back , re init wow again ,
the wow elements is firstly visible and then animate
Hello, is there a way to make sure that the animation runs only once?
I have tried using data-wow-iteration="1" but it didn't work.
I just started using wow.js and testing it in my mobile browser I noticed that the viewport becomes larger creating a horizontal scroll. I think the reason for the overflowing is that the animations like fadeInLeft, fadeInRight and similar ones start outside of the viewport.
1 - Viewport bug: On mobile browsers the width becomes larger than 100%.
2 - To solve it I add some lines in my CSS to hide the overflow-x of the <body>
.
This solve the problem, but I wouldn't like to do a MacGyver on every page I create. In animate-plus.js, for example, this behavior is defined right in the JS file to avoid quick fix in CSS. So my question is:
Is there a way to solve it directly in WOW.JS ?
Best regards,
Jaris GV
Hi! A new version of animate.js has been released, I think it's time for you to update too!
Hello friends,
I have been trying to use WOWjs in a Wordpress Theme but trying different ways (putting it in a script in the body, in the header, in a separate js file, putting it in the footer) EVERYTHING has been unsuccessful. You keep getting the error that WOW is not defined. I hope you can help me.
Super Thank You!
Is there any way to run animation every time reach the section
Hello author,
In an asynchronous request in Vue, when I jump back to the previous page, WOW has no way to execute the animation immediately, but needs to have a scroll before the animation is executed.
Is there a way to perform CSS animation immediately after initialization?
I've tried it in mounted(), activated(), and $nextTick(), and I can't perform CSS animations immediately after returning to the previous page.
Seems to be an issue on a client website, https://scattervolt.com where the animate.css library loads before the animations with wow.js do. Any fix?
To prevent elements from 1st showing, then disappearing and then appearing again (animation) when using wow, I added the CSs line: .wow { visibility:none;}
However, this causes elements to stay hidden when JS fails or disabled in browser. For that, I created this little / script function:
<!-- wow backup -->
<noscript><style>.wow {visibility: initial;}</style></noscript>
<script>window.onload=function(){elem = document.querySelector('.wow');style = getComputedStyle(elem);if (style.visibility=='hidden') {style = document.createElement('style');document.head.appendChild(style);style.sheet.insertRule('.wow { visibility:initial;}');}}</script>
I herby inform you about the Termination of the provisioned subdomain (wow.js.org). The subdomain will be removed in 7 days. see ToS $3 3 :
JS.ORG may also terminate the provision of a certain or all subdomains. Concerned users will be notified at least 7 days in advance by an issue in their GitHub repository
Animations are revealing correctly on scroll, but can we make them animate on hover?
Would be good for buttons etc.
Have tried this (and similar variations) without luck:
.button-element:hover {
animation: jackInTheBox 2s;
}
Hi!
I'm trying to use wowjs in React app and everything was fine, until I moved the project to SSR.
Since on server we have no window object it says:
/client/node_modules/wowjs/dist/wow.js:336
if ('requestAnimationFrame' in window) {
^
ReferenceError: window is not defined
Is there any possibility to review the lib and include SSR support?
I have some percentage circles on my page and they are further down the page as a lot of content is above it - e.g;
lots of content pushing the circles down the page so that you can't see them
circles I'm trying to animate on scroll
I would like to know how to use wow to be able to activate the circle's animation when I scroll down to them as at the moment they are activating when I cannot see them.
My code is here: https://codepen.io/digitalbydefault/pen/LJYPXw
Please, can anyone point me in the right direction?
thanks
NgwWowModule is not compatible with Angular Ivy
the page loads and the animation plays and finishes.. expected not to animate again
for a certain reason i need to display none the wrapper of one of the animated elements and show it back on a certain condition..
when i show it back the animation inside this wrapper plays again..
how can i stop this behavior??
how can we for example add a class that stops any attempt of the animation after that the element has already animated..
hello, can i put the init-Code directly into the js instead in a script tag? wow does not run since i implemented a csp header because the init-code is recognized as an inline script which are ignored. I am not used in js, so, if it is possible, i would need the whole lines to put in with all the ({; and so on
Can anybody helpp me? Thanks in advance, Silke
"The UpLicense gives you the right to use an product purchased from the Uplabs Store for personal use or as part of a commercial project, for yourself or a third party. However, the product cannot be redistributed for free or sold, on its own or in a bundle, where it constitutes the core value of the end product."
IMO, this is illegal distribution of wow.js. I dont understand the law basis of this. Why the website also copy original site? Any clarification? Did I just accidentally steal software?
A few days ago, 'Animate.css' was updated to v4 with breaking changes.
https://github.com/animate-css/animate.css/releases/tag/v4.0.0
The difference with v3 are as below:
. add prefix to all classnames.
(fadeIn -> animate__fadeIn, animated -> animate__animated, and more...)
. utility attributes was changed to utility classnames.
(ig. delay attribute was changed to 'animate__delay-2s' class )
I'm trying to implement them now, please just moments. ( When done, I'll make a pull-request. )
Why do I get this error when I try to use wowjs with webpack?
Im using parallaxImg with WOW but all the animations start when the page load, it ignore the trigger from scroll. Any ideas?
Animation all working on scroll inside a scroll container. but data attribute thing is not working.
https://wowjs.uk/ is blocked in India.
See this for why: https://github.com/captn3m0/hello-cloudflare/
See this for the fix: https://github.com/captn3m0/hello-cloudflare/blob/main/README.md#help-my-website-is-blocked
I have some parts of the website that are only visible on mobile, the Hide classes are with visibility: none, but because I have the wow class on the children elements in order to animate them, it makes them visible on desktop as well. Since I have reached the section it puts visibility: visible;
I do not wish to change the Hide classes to use display: none, I prefer the Visibility one. Is there any way around this?
Everything loads fine on desktop but when the mobile: false setting is set in the init code, I get the following error:
"Uncaught TypeError: this.boxes.push is not a function" from wow.js:1:4068
The init code is:
(function ($) {
new WOW({offset: 100, mobile: false}).init();
})(jQuery);
@graingert I just wanted to thank you for this great drop-in replacement for npm package wowjs
, which had me scratching my head all afternoon. After installing your fork wow.js
everything worked like a breeze in my react/webpack app. Thanks for your hard work.
Wow js not working with Angular 6
Fliplingo
https://www.fliplingo.com
Hi there.
I have tried to use it with https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
but it did not work.
I have copied https://wowjs.uk/css/libs/animate.css
and looks like it's working.
Any ideas on this?
Ty!
I tried using WOW.js with the latest version 4.1.0 of animate.css from cdn.js and it didn't work, had to revert to an earlier version of animate.css (3.7.2) as I had used it in an earlier project.
Just for the sake of future users.
Love the work you guys put in to get it free for all to Use.
This is just my little way of saying thank you :)
J.D Braide
Can someone clarify for me the license of this library. Is it MIT?
Why is the site UpLabs charging for a license?
I try to use wow.js with animate.css, how ever, it not works when I use CDN Link from official site of animate.css.
But when I use old version, it works.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.