JavaScript Animations Help


HippySunshine

HippySunshine

Senior Member
#1
I have a WordPress website that I have built and wanting to implement some animations into something like this: https://konform.com/
I can do CSS animations, but I assume JS is better for this type of project?

I only have basic vanilla JS knowledge (but really want to sink my teeth into it). Am I running before I can walk? :X3:

Does anyone have any resources/advice/tutorials (anything really) for beginners that they can recommend. I really don't know where to start.

Thanks :giggle:
 
fisicx

fisicx

Active Member
#2
Why on earth would you ever want to do something like that! It's awful.

In any case it's a mix of CSS and JS. If you want something like that you would be better off paying someone to do it for you

Any site that hides the main navigation the way they do clearly doesn't understand how people use websites.
 
HippySunshine

HippySunshine

Senior Member
#3
Why on earth would you ever want to do something like that! It's awful.

In any case it's a mix of CSS and JS. If you want something like that you would be better off paying someone to do it for you

Any site that hides the main navigation the way they do clearly doesn't understand how people use websites.
Are you here to judge peoples opinions or help?
And why would I pay someone to do it when I am already a web developer and trying to learn new skills?
 
bigdave

bigdave

Moderator
Staff member
#4
The wowjs library is a pretty good place to start for this kind of thing (the site is awful but you can use the library for some pretty impressive stuff).

Be aware however that google can't crawl content hidden by wow, which has an obvious knock on effect with rankings.
We used it for a project recently and only way round the crawl issue was to load the content and then fire the wow library 'on scroll' so content below the fold appears to be fading in.
 
HippySunshine

HippySunshine

Senior Member
#5
The wowjs library is a pretty good place to start for this kind of thing (the site is awful but you can use the library for some pretty impressive stuff).

Be aware however that google can't crawl content hidden by wow, which has an obvious knock on effect with rankings.
We used it for a project recently and only way round the crawl issue was to load the content and then fire the wow library 'on scroll' so content below the fold appears to be fading in.
Thanks for this. I'll take a look.
Is it best practice to do these kind of animations with js or would css be ok for some/all of it?
 
Paul Murray

Paul Murray

Moderator
Staff member
#6
I personally prefer to use CSS as much as possible for animations, mainly because it means I don't have to mess about trying to debug JS.
 
HippySunshine

HippySunshine

Senior Member
#7
I personally prefer to use CSS as much as possible for animations, mainly because it means I don't have to mess about trying to debug JS.
Well me too, I just thought JS was a better way to go? I'm happy with CSS if not :)
 
bigdave

bigdave

Moderator
Staff member
#8
It's six of one and half a dozen of the other for me. If its a simple animation or transition then I'd lean towards scss. However as things get more complex I'd prefer use js.

This article is quite an interesting read on the subject.
 
fisicx

fisicx

Active Member
#10
Tried it once and never went back. It's an Apple proprietary element which although supported by most browsers doesn't really add anything useful.

Most of what you can do in canvas you can now do with CSS3.

And while animations were popular for a while, lots of user testing has shown people prefer sites without animations.
 
Paul Murray

Paul Murray

Moderator
Staff member
#15
I try to use animations very sparingly, basically just to provide user feedback, i.e. drawing attention to new content loading in or a change somewhere or to help reinforce that something is an interactive element. I do find that a lot of clients like overly flashy websites, mainly because their competitors have animation-heavy sites, but this has been the case with design trends for as long as I've been a designer.

That Konform site isn't too bad, but many elements loading in at once can make a site feel much more sluggish to use than it actually is.
 
fisicx

fisicx

Active Member
#16
That Konform site isn't too bad, but many elements loading in at once can make a site feel much more sluggish to use than it actually is.
Especially so if you saw something you liked the look of and have no way of stopping the animation to find out what it was.

Over the years there have been many trends that have come and gone. <marquee>, trails of stars following the pointer, flash, animated backgrounds, autoplay anything, walk-on presenters, explainer video, hero images with animation and many many more. They all looked great for about a nanosecond and then became annoying and were soon dropped. User testing works. Unfortunately not many people do it before launching the latest idea and then wonder why sales are dropping.
 
Top