An Introduction to SVG – Part 3

Hey guys, welcome to another post about SVG. So far we’ve seen how to create, stylize, and load SVG shapes and we took a look at the SVG coordinate systems, the viewport and the viewbox. By now, you have acquired some basic knowledge on SVG and you might have ideas or little tricks of your own.

Continue reading “An Introduction to SVG – Part 3”

An Introduction to SVG – Part 2

At the end of my first post about SVG, I told you that today, I would talk about the use of CSS with SVG, but guess what… I lied. Yep!

Do I feel sorry? Not even a bit. Why? Because it’s for your own good.

As I was writing the CSS and SVG article, I realized it was a better idea to tell you about other SVG properties first, so you can see the whole SVG world and use it to its full potential. Being able to understand, draw and use basic SVG shapes is cool, but like I said in the first article, it’s only the tip of the iceberg. Knowing and using only the basic shapes is like having a Tesla car, and only driving it in your driveway.

Continue reading “An Introduction to SVG – Part 2”

An Introduction to SVG – Part 1

You remember that kid at school sitting in the back of the classroom whom nobody ever talked to? Everybody knew he was there, most of them knew his name but nobody wanted to be teamed with him when it was time for teamwork because they all wanted to work with their long time friends.

Some of you reading this are probably saying… Dude, that kid was me man!

Then one day, during art class, your best buddy wasn’t there and you had no one else to work with besides this loner sitting in the back. That’s when you finally found out that he was one of the coolest kids at school, with the sharpest collection of crayons. Continue reading “An Introduction to SVG – Part 1”

CSS animations with GWT using GSSS

When we decided to redesign our website, our aim was both to present our new branding and showcase the possibilities of GWT.

Manon, our designer, did an awesome job on the branding. As part of that, she came up with cool ideas for animations that would represent each section of the website, and that would also illustrate our methods of working with clients, on our Services page.

As an HTML and CSS developer surrounded by Java developers, I have rarely had the occasion to create animations, besides some hover or transition effects needed in applications we developed for clients. This was an exciting opportunity to try something new. Of course we didn’t want to disappoint our designer, but more than this, we had an opportunity to think through how to develop animations in the most clean and efficient way. As a result, GSSS animation was born.

What is GSSS animation?

GSSS animation is basically a CSS library based on the popular closure stylesheets library that lets you create CSS animations without having to start from scratch. It provides mixins, which are CSS declarations you can reuse, for almost all CSS animation properties. There are also a bunch of preset animations you can use right from the get-go. To learn more about GSS, see this blog post by my colleague Jason Lemay.

In this post, I’ll show you how you can create some simple CSS animation using GSSS. We’ll go step by step, showing you how to:

  1. Add GSSS to your project;
  2. Create a simple animation, using one of the preset animations provided by GSSS;
  3. Modify the animation to make it yours.

Let’s start!

1 – Add GSSS animation to your project.

First of all, you want to add the GSSS dependency into your pom.xml.

Then, import the GSSS animation into your GWT module by adding the following line.

Create a GSS file named myStyles.gss in your resources folder in the package: com.projectname.project.client.resources.css.
*We’ll use that stylesheet later to add some classes.

Finally, create an AnimationsResources.java file, in which you will import your GSSS files and the myStyle.gss file you’ve just created.

Now that you got your GSSS animation all set up, let’s go into your view file (we will use view.ui.xml) and create an animation using one of the presets provided.

2 – Create your first animation.

2.1 Adding our elements in place

In your view, import your AnimationsResources.java file like so:

Create a div and add the .myAnimation class to it.

In the myStyle.gss file we created earlier, add the .myAnimation class and give it the following CSS attributes to create a simple red square.

You also need to add the .myAnimation() method in the AnimationsResources interface.

You’ve got your div and all the elements you need. Now it’s time to animate it.

2.2 Using a preset animation

In the animations mixins, we created a class named .animation that is required every time you want to use one of the preset animations. It provides the property animation-duration which is needed for the animation to play. Otherwise, the duration is set to “0” (so it will play for 0 seconds), and you won’t be able to see anything.

Let’s add that class to your div.

Now you can add any class from the GSSS animation mixin. For this example, we’ll use the one called .pulse. Let’s add it next to the .animation class.

Check the result and… Congratulation! You’ve just created a simple animation of a square pulsing on your page. Pretty easy, isn’t it ?
*if you want the animation to play infinitely, add the .infinite class provided in the GSSS animation mixin.

2.3 Modify the preset

Now you’ve got your animation. But what if you want to change some of it’s properties? Obviously, you can’t edit the preset animation directly in the GSSS file, but in myStyle.gss, we can do any modifications we want and they will overwrite the presets.

Let’s change your animation by making it scale a little bit more.

If you look inside the animations.gss you’ll see the .pulse class has a keyframe.

What you want to do is copy/paste the keyframe and the attribute you want to change from that class into your myStyle.gss. In that case, we want to change the transform of the 50% value and change the scale value to (2).

Check the result and you should see now that the square scales a lot more than before.

Now that you know how to create and modify an animation using presets, let’s see how we can add more animation properties to it.

2.4 Using the animation properties mixins

Like I said in the introduction, GSSS provides all the animation properties needed to create CSS animation. To use them, simply add the mixin you want to use in your class.

Let’s say you want your animation to wait 3 seconds before it starts. In the animation.gss you can find the animation-delay property mixin.

Add it to your .myAnimation class like so :

Change the value of DELAY to 3s, for 3 seconds, and refresh your browser. You’ll now notice that it takes 3 seconds before the animation starts.

Conclusion

So that is it. Pretty simple right? That was one basic animation to show you how to get started using GSSS animation, and you probably did it without even breaking a sweat! So explore and have fun with it. In an upcoming post, we’ll go a little deeper into this topic, and I’ll show you how to create a slightly more complex animation in GWT, using GSSS and other cool stuff such as SVG.

Until then, have fun and take care.