A lovely gallery here https://daneden.github.io/animate.css/ but I'm concerned that it's too bloated and will slow down my page load, it's already slow and it has nothing on it yet http://concretepokerrepair.co.uk/nav-test.php?

 

I didn't think it would be too hard to pull out the effects that were desired but I haven't really started trying yet. I got a very basic fadeIn effect working from w3schools but I would only like this to load a few seconds after the page loads. Which is done with the animation-delay: 2s; property but it loads first, disapeers then fades in which obviously looks bad lol.

 

So this got me thinking as I've been doing a lot of reading into Javascript lately, getElementById and putting a seperate class into it would isolate it into doing something different.

It's embarassing that I still haven't learned these as I've read these pages about forty times now.

 

My real question is do the pro's use libraries and JQuery for these things? I think it may slow down my loading speed and I'm relying on a lot of share buttons etc and slideshows which are already slowing it down too much.

I would think isolating the effects I desire and moving them to my own css would be the way to go.

 

Thanks guys.

Edited February 15, 201610 yr by Precise Formwork

There's not much point for CSS as it's so simple anyway. For JavaScript then for performance reasons it's a good idea for anything beyond the most basic of animations. look at http://greensock.com/gsap

A lovely gallery here https://daneden.github.io/animate.css/ but I'm concerned that it's too bloated and will slow down my page load, it's already slow and it has nothing on it yet http://concretepokerrepair.co.uk/nav-test.php?

 

I didn't think it would be too hard to pull out the effects that were desired but I haven't really started trying yet. I got a very basic fadeIn effect working from w3schools but I would only like this to load a few seconds after the page loads. Which is done with the animation-delay: 2s; property but it loads first, disapeers then fades in which obviously looks bad lol.

 

So this got me thinking as I've been doing a lot of reading into Javascript lately, getElementById and putting a seperate class into it would isolate it into doing something different.

It's embarassing that I still haven't learned these as I've read these pages about forty times now.

 

My real question is do the pro's use libraries and JQuery for these things? I think it may slow down my loading speed and I'm relying on a lot of share buttons etc and slideshows which are already slowing it down too much.

I would think isolating the effects I desire and moving them to my own css would be the way to go.

 

Thanks guys.

 

I've used Animatate.css a lot, it's extremely lightweight if you just choose the animations you need. Each one is a single piece of Sass or CSS (if you used the compiled version) that can be ripped out and placed in your stylesheet. Then there's one main animate class that you also take, to trigger the animation.

 

Typically you see this library used with something like Wow.js or Scroll Reveal, so that animations appear when you scroll to an element.

Thanks Rob and Jack, cool link Rob, yeah animate.css looks pretty amazing to me Jack. Yeah I thought I'd be able to strip-out what I need and use that; animate.css is going to be fun.

 

Thanks guys, appreciate the direction.

Definitely recommend stripping out only the animations you require (if you're using something like animate.css).

 

You could even go one step further and do away with libraries such as wow.js - they're totally unnecessary. Here's a great tutorial on how to handle triggering animations on scroll.

Definitely recommend stripping out only the animations you require (if you're using something like animate.css).

 

You could even go one step further and do away with libraries such as wow.js - they're totally unnecessary. Here's a great tutorial on how to handle triggering animations on scroll.

 

A library like GSAP is considerably better for performance than what that tutorial is demonstrating, for a start in the tutorial the scroll handler is not debounced and they are not using RequestAnimationFrame. These two are critical to getting a great frame rate and avoiding things like layout trashing etc.

I love building things myself and have experimented a lot with building out scroll animations, but to get strong performance is way more difficult than you think. GSAP has actually been bench tested to perform better than pure CSS animation in many circumstances, it is an extremely well written library.

Edited February 16, 201610 yr by rbrtsmith

Hmm, my effects seem to be working with animate.css which looks great and is lean code, but it's not working on iOS, I've added both the animation-name: and the -webkit-animation-name: to said elemen ts but not working on an iOS.

 

Does animate.css work on iOS? W3schools and css3.bradshawenterprises.com only have desktop-based browsers listed; which seems very outdated with mobiles about to overtake Desktops.

 

Rob wow; GSAP is amazing, just watched their starter tutorial. I'm amazed animate.css outranked GSAP. It came up first on a JS library but not on the first few pages of SERPs. Thanks for pointing me in this direction, hopefully I get to play around with it when I get a bit further through JS as can't even write or understand an expression or function yet.

 

JakDot, thanks for that tutorial bud.

*If you use something like autoprefixer then you never have to even think about vendor prefixes again, I suggest you add autoprefixer to your build process

Thanks Rob, was not aware of the auto prefixer - a very handy tool! I've just tried one out and no joy, it's coming up exactly as the cod is written. I must be missing some sort of tag somewhere.

 

I checked out animate.css on my iPhone and it does work on iOS so I'm definitely doing something wrong.

I stripped out what CSS I thought was necessary, and I've checked the original css file created by css.animate and cannot find any events that I'm missing.

 

Does it need Javascript to function on an iOS or something like that?

I've not really used Animate.css as I don't think you really need a library for CSS animations as they are pretty simple compared to JavaScript. But being a CSS library it won't need any JS to run.

 

Autoprefixer should be part of a build process. You can use tools like Gulp or Grunt, even NPM scripts. If you're new to build tools I suggest you look around for some Gulp tutorials

Edited February 18, 201610 yr by rbrtsmith

I've not really used Animate.css as I don't think you really need a library for CSS animations as they are pretty simple compared to JavaScript. But being a CSS library it won't need any JS to run.

 

Autoprefixer should be part of a build process. You can use tools like Gulp or Grunt, even NPM scripts. If you're new to build tools I suggest you look around for some Gulp tutorials

 

The Animate library is literally just small keyframe animations you can use, that's all really, there are no unnecessary styles in there at all.

Thanks Rob, it's strange as I coded my own fadeIn effect using CSS3 only and this worked fine, however using the animate.css library it's not kicking in on an iPhone, which seems really strange to me.

 

I've checked out some articles which are quite helpful but I must be missing some sort of trigger.

 

I added them inside the MQ's too which I thought would be superfluousley unnecessary and I'm pleased to say this didn't work otherwise I would really be in trouble with bloated CSS.

@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn; -webkit-transform-style: preserve-3d;}

Can't see why this simple fadeIn effect won't function.

 

The Animate library is literally just small keyframe animations you can use, that's all really, there are no unnecessary styles in there at all.

 

I'm not saying it's a bad library, I just think keyframes can be just typed out yourself but I guess a library such as this makes it a little easier for those who are new to CSS animations For a timeline beyond anything basic I'd probably err towards something like GSAP.

 

When compared with JavaScript it can require a lot of work and expertise to get things performing at a high frame-rate or for complex timelines. Which is why I advocate more for a library such as GSAP to be used.

Edited February 18, 201610 yr by rbrtsmith