If you're wondering how JS can be useful for you as a web designer or if you're convinced that HTML and CSS is all you need, then I have a few things to show you that might change your mind.
I could just end this by saying something along the lines of:
"Yes, because you'll be the shit."
Go beyond pseudo-classes.
If you're using transitions, you need some way of triggering the transitions in the first place. That is, you need to change some CSS properties to see the animation happen.
Now the most common way to do this is by using pseudo-classes like
:hover. Here's an example of that (hover over the button to animate the shadow):
But that only gets us so far. There are times when we want to programmatically add and remove classes. For example, say I wanted something to happen after I clicked on a button. Slide in a menu. Show a modal. Anything, really. Here's an example:
So here we used JS to add a class to the background element. Adding the class changed the property that we wanted to animate and voilà! Here's another example but this time using CSS Animations. Click on the ❤️ below:
Here we added a class that applied the
animation property to the element. Learn more about adding and removing classes for transitions in here.
Say I wanted to know when an animation stopped playing. And say that I wanted confetti everywhere right after the animation. One way to do it is to set the confetti to display right after the animation using a delay. But what if the animation is only triggered by the user? I wouldn't know when to trigger the confetti then, right?
Enter events in JS. I can add something like
$(".HeartAnimation").one('animationend', ...)which would tell me when an animation ended. Here, try clicking on the heart again:
As you can see, the confetti came out right after the heart animation finished.
Take advantage of animation, visualization, and prototyping tools.
There are libraries out there that you can take advantage of such as GSAP, Popmotion, and mo.js that can help you make really mind-blowing UI, and even help you transform and animate SVGs that you made. Some libraries like D3 and Mapbox can help you add visualizations with interactivity in it.
Because you'll be awesome.
This is more abstract, but the truth is that learning is downright empowering. Here's a slide from Rachel Nabors:
And that's it
I hope that got you thinking and I hope you consider learning JS in the near future. Here are some links that you might want to check out:
Did I miss something? Email me!