Hello Gents,
I try to figure it out how to apply warpspeed.js to my website but no luck.
Any help would be perfect!
I’m trying to do the same thing with wow.js I’ve been able to load the library, but cannot get webflow to do anything with it. LMK if you figure it out and I’ll do the same.
@Kevin_Mind1 , I’ve used wow.js in Webflow. If you’d like I can take a look at your set-up if you share your site read only link.
Hey @ajolnir could you share your site’s read only link and the link to the published site? If so, I could take a look. Thanks!
Make sure to go to animate.css page. I’ve added the library in the site wide scripts. It’s loading fine. I used the webflow custom script wrapper suggested here, but have tried it without also.
@Kevin_Mind1 looks like you aren’t including the wow.js files correctly in your custom code. Here’s what you can do:
1.) On the page you want wow.js to work on include this custom code inside the tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
2.) On the same page include this custom code before the body tag. Make sure to include the wow.min.js file (https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js) and be sure to wrap it in a script tag. Feel free to get rid of the mobile false if you want it to work on mobile.
wow = new WOW(
{
mobile: false
}
)
wow.init();
From there you should be able to add the wow classes to any of the elements in Webflow (ie fadeInUp) and it should work on the published site.
Let me know if this works when you try it.
@justin_c I tried it as you said adding animate.css and wow.js then added the custom script to initiate wow. everything seems to be working. If I check developer tools, the library is there, but only the bounce effect works. If I use “fadeInLeft” nothing happens…
I’ve tried many different combinations and it seems only the attention seekers work and not any fade or other effects… any idea why that would be?
I
http://digitalpresence.webflow.io/animate-css
open up developer tools, and manually write fadeInLeft in the second h1, then when you scroll to it, the effect will work. But if you refresh the page and down’t manually type it in, it will not work.
@Kevin_Mind1 looking at the published page source, it seems the classes don’t have the proper capitalization. They are being published as fadeinleft (screenshot: https://screencast.com/t/nSaCyz3UR) , but need to be fadeInLeft
In webflow it looks like it should have the proper capitalization. Could you try to remove the classes, re-enter them with the proper capital letters, and re-publish?
When you do this, does it work?
You’re right! I have them typed correctly but webflow must be lowercasing the classes when I publish…
@webflow Do you know why my site is lowercasing all my css classes?
tested it with lowercase selector and it worked. The issue is with animate.css actually. The selectors are in camel-case. I may end up forking it on github and making a webflow compatible version. But didn’t you say you’ve used wow.js before… do you mind me asking what link you use for animate.css in that project or could you share the link?
@Kevin_Mind1 ahh yes that would be it then, I forgot Webflow automatically lowercases all classes. Unfortunately checking my project, I used custom code to insert the actual elements so that’s why I was able to use wow.js 
For example, I used an HTML embed and simply embedded all my elements (ie <div class=“wow fadeInUp”) , so that’s why it held the camel case.
Someone from Webflow would have to chime in here to see if there’s a workaround to maintain capitalization in the published site.
Lastly, on another project I simply recreated the wow.js animations that I wanted to use in Webflow’s interactions. So I created a fadeIn, fadeInUp, slideInLeft, etc interaction and just used those. I checked out the source of wow.js so was able to recreate the animations exactly. If you’d like to go this route I’d be more than happy to help
I don’t recall any option for this. It’s done on the server when you publish, so the only way is custom code if you want to keep it exactly as it is.