Adding Animate.css and wow.js to Callisto
-
-
- neuclix
- Hero Rocketeer
- Posts: 298
- Thanks: 3
- Mark, I am successful only in making the whole roksprocket module faceInLeft. I would like to know how to make just the title fadeInLeft while the description does something else and so forth. Where would I place the "wow fadeInLeft" in order to accomplish this?
- Thanks in advance,
Steve Hodges
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
I'm glad that you got it working.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Arnaud
- Sr. Rocketeer
- Posts: 232
- Thanks: 3
-
Hello Mark,
I think I followed your tutorial step by step.
Everything is working great except one thing : I get some kind of "double animation effects". Like the element is visible in the page for half a second, then disappear, then appears again with the animation. Or sometimes the animation happens twice. No nice.
I'm not sure if you can see it cause I don't get this on every browser. Mostly on Firefox (OSX) and Safari (iOs).
My ideas so far were maybe some incompatibilty with headroom.js or maybe this weird behaviour happens when the content (images) is not 100% loaded ?
Or maybe I did something wrong ?
Thank you for your help if you can spot this better than me !
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You've added the wow class on the whole slider? This is a bad idea, you only want to use the wow classes on the content within the slider (e.g. title and text). The slider is already using animation so it's never going to work acceptably on the slider.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The slider was the only one that had the issue for me - the other seem fine. We didn't write wow.js so we're not in any position to change it's behaviour. I can tell you that the animations are triggered as soon as they are visible on the page (regardless of whether the page has completely loaded yet) and this can cause strange effects sometimes too. Also, if you do use it in slideshow content, in those slideshows that load all slides in the one page (and just hide the others from view) then the animation will be triggered in every slide at the same time (because they're technically visble) and so often you just see the first slide animations only.
The way to minimise these glitchy effects is to minimise the size of your page being download to the browser (image size are usually the main culprit of large page size) and ensure that you are using "conservative" cache, gzip compression, and a compressor (e.g. rokbooster).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Arnaud
- Sr. Rocketeer
- Posts: 232
- Thanks: 3
-
OK, thank you for your (quick !) feedback and advices. I'll try to follow them and see what happens
This is really weird cause even in the same browser it doesn't behave the same way everytime, grrrr !
Have a nice evening
Arnaud
-
-
-
- Jorge Luis Campos M.
- Newbie
- Posts: 4
- Thanks: 0
-
Mark, is there a way to add Wow Effects to a Gantry 4 template? I would like to addit to a Clarion site, and I see Chimera has it, and this is a Gantry 4 Template too...
Thanks in Advance!
Jorge Luis
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
http://mynameismatthieu.com/WOW/
Follow the instructions on their site. You will need to add the script and the animate.css in the head section of the templates index.php - but I recommend that you usea third-party extension to do that dynamically rather than editing our oiriginal Template files (which will be overwritten by updates). As this topic is for Gantry 5 (not 4) please ask any further questions in your own topic in the appropriate Template forum.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.068 seconds