7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 27 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Animations

Sequence.js is an animation framework; that’s what sets it apart from other JavaScript sliders out there. You can animate not only the canvas, but also the elements inside. Let’s find out how.

2.4 Animations

Hello, and welcome to lesson number four. In the previous video, you went from simple markup, to working slider by applying JavaScript in CSS. Now, Sequence is an animation framework. It's what sets it apart from all the other sliders and carousels out there. And, as a result, it can animate its canvas. But, it can also animate its content. So, let's see how exactly that's being done. Well, let's talk about the canvas first. And you saw it in action, right? When we hit the arrow keys, we can cycle between these tabs. And this is the canvas being animated. It's turned on by default, you can turn it off if you want. But what it's doing basically, is its sequence will find the off set left and top values. And it's gonna use these values to move the canvas so the current step is shown within the container. You can think about this as a window and, let's say, a train passes by, right? You can only see so much through that window. Think of the window as your container and the train, your steps, each as train cart is a step. So when the train passes by, you can always see as much through the window and something similar happens with sequence. It’s gonna find these offset left and top values of the steps. And it’s gonna move the entire canvas, or the entire train, behind the window, or behind the container, so you can only see the current step. And as I saw that's activated by default. You can use an option called Animated Canvas to turn this on or off. And an example of a situation where you might not want the canvas to be animated is when all of the steps are stacked on top of one another. They're basically in the same position, they're just stacked like a stack paper. Well, in that case, you might not need to animate a canvas. Now let's talk about animating the content inside the step because this is what makes sequence so great. First, there are three, let's call it stages, or phases, for each step. First you have the start phase, which is, the phase exactly before that element is active. Then you have the in phase where the element is active. And then you have the out phase where the element is not active. And sequence will apply the classes of seq-in and seq-out to these steps in order to make this transition. The cool thing is, you can get these elements, you can reference them in your CSS, and style them however you want. You can apply transitions, you can set the different durations. I can transition different properties. You can create some very, very interesting effects. So let me show you an example. Let's say that when we're switching between slides, we want the headings and the text to go from zero opacity to one opacity. And also from a slightly different position to their original position, and we want to animate this. Well, we can do that very easily by going to our code here and adding some animations. And those animations look like this. First, I'm referencing all of my elements, this, of course, will depend from case to case. But here, I'm setting zero opacity for all of my headings plus paragraphs. And I'm setting the transition duration to one second. Also setting some initial states for the button and my icons. What I'm doing here is setting a transformation and basically pushing the button down by 2320 pixels. And the image is up by 320 pixels. And then, I'm also pushing H1, H2 and H4 up by 20 pixels. And the H3 and paragraph down by 20 pixels. And this is where the interesting things happen. We are targeting the sequence in stage for each one of these elements. And we're going from opacity 0 to opacity 1 and we're going from translate, I believe it was 20 pixels, no, -20 pixels, to 0. So we're coming back to the original position. Button and img doing the same, we're going from their y values to 0. And then we're doing the same styles for seq-out and the result of all this, is the following. When we switch slides, You can see that we are adding some animations to the elements. Let's do that again. Yeah, you can see that this heading go from zero opacity in a slightly higher position, to one opacity and its original position. And this button, goes from a position all the way down here, to its original position. So we're bringing it from down here, to up here. And let's see the initial one, let's go through these again. So we can see just with a little bit of code you can create some very cool animations for different elements. That's what's nice about it, you can animate one element in a way and you can transition another element in a different way. Very interesting. So again, to animate them, set some initial styles like I did here and then target the seq-in and seq-out classes with different styles. Now, currently the seq-in and out styles are the same, but they don't have to be. I just left them like this so we have a consistent experience, but on the out state, it can specify a totally different style. We can hide it back if you want, in my case, I just thought this will look the best and that's it for this lesson. Next time you'll learn about options, and you've already used an option before, but there are a couple more that you should know about. See you there.

Back to the top