JavaScript Animations Help


HippySunshine

Senior Member
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

Active Member
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

Senior Member
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

Moderator
Staff member
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

Senior Member
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

Moderator
Staff member
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.
 

bigdave

Moderator
Staff member
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

Active Member
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.
 

bigdave

Moderator
Staff member
I'm pretty sure animations are still popular, if not more so these days.
I'd agree, the subtle use of animation can make a site feel more engaging and interactive.. It's when you get someone whot starts animating elements 'becuase they can' that it looks over the top and tacky.
 

fisicx

Active Member
I'm pretty sure animations are still popular, if not more so these days.
They are with graphic designers and similar

Not so much with the users of websites. Do some testing (something I do all the time). Split test a site with animations and without and see what results you get.
 

Paul Murray

Moderator
Staff member
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

Active Member
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.
 

HippySunshine

Senior Member
I have a related question to my original post.

I have an onClick toggleClass using jQuery. The new class then runs some keyframe animations.

When I click, the animations work perfectly, smoothly transitioned in.
When I click a second time, there is no transition on removing the class styles.

I can't seem to figure out why this would happen? Can anyone shed any light?

It's pretty standard and basic. I've not got to anything fancy yet.

HTML:
<button class="burger">
    <span class="line"></span>
</button>
CSS:
.burger {
    width: 25px;
    height: 25px;
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    position: relative;
    z-index: 1;
    transition: all 0.7s ease-in-out;

    .line {
        background-color: $black;
        display: block;
        width: 25px;
        height: 1px;
        position: relative;
        top: 1;
        transition: all 0.7s ease-in-out;
    }
}

.active { 
    .line {
        animation: lineAnimation 0.7s forwards;
    }
}

@keyframes lineAnimation {
    0% { }
    100% { width: 50px; }
}
JavaScript:
$('.burger').click(function(){
    $(this).toggleClass('active');
});
 

Paul Murray

Moderator
Staff member
I'm not a JS developer (I kind of hate it actually) but f I had to guess, I'd say it's maybe this line:

Code:
.active {
    .line {
        animation: lineAnimation 0.7s forwards;
    }
}
It seems like you're animating the line when it has the .active class but when you remove it there's no animation and it just reverts back to the settings you've originally assigned to it. Rather than running the animation, try just specifiying a width in .active .line {} and see if the transitions work then.
 
Top