Welcome to this course on motion graphics. No matter if you are a beginner or a professional looking for refinement of your skills set, this course enables you to animate your website by motion graphics design.
Let’s embark onto the exciting world of motion design fundamentals, share modern tools and techniques and learn how to implement them in real projects.
“This program is ideal for everybody who aspires to become better and I am ready to offer my knowledge and coaching on this topic to help you upgrade your designs from being good to stunning.”
This course features 19 practical exercises. If you want to follow along, you can download the starter kit.
You can also find all sorts of useful web design resources on Envato Elements. Download icons, logo templates, fonts, photos, video templates, and more. Motion Design for the Web FREE COURSE
Let us first discuss what motion design as a whole entails. Here’s a general definition:
Motion design simply is the art using graphics and animation for bringing motion to an object. It means that the image of graphic elements such as text, illustrations and so images are animated to make them more interactive and engaging.
Motion design finds use in a number of areas including film titles, ui designs, ads and videos. In total it comprises three major components:
Transitions and animations are the same thing and quite different too. Transitions enable us to go from one state to the other and are considered to be an added element of sophistication. This site for example has an effect on the menu items, they slid to the left and changed color whenever the user hovered over them.
Animations and transitions have one point of similarity, that they both move from one level to another; apart from that, they are quite distant as an animation allows us to create a much more complex movement than a transition. The examples below can be seen in this case scrolling across the page brings up different animations illustrating the various projects.
Motion Design for the Web FREE COURSE
Is it that important to include motion? Well, it does serve two functions; one informative and the other aesthetic.
In the example below, there is a small scroll bar on the left lower corner of the screen in order to show the users that the screen can be scrolled down to view more content. This is informative and helpful. Animations can also be aesthetic in a way as they serve to enhance the style and character of a website.
Let’s begin with video. Let’s take a look at some practical applications for the use of video on the Internet.
To begin with, we can say that a lot of video content, expecially advertising, is placed on Apple’s website in order to advertise the company’s products. Here we see the seven colors available in the iMac and later on we will see videos of the other features such as six speaker sound system.
Another great example is the Freehand app, whose website displays a prominent video showing the product in use. It gives us a clear idea of what the app does and how it could help us.
You’ll also see some websites employing a video for the hero section, which in some cases can be very useful.
Now let’s shift our attention to the technical aspect of the task and see how we can embed videos into our web pages.
In this instance, we will be using a blank template with a text editor only, how can we add the video on the right?
In that case, yes. It’s simply explained. Find the YouTube video, click on share and copy the code given in the pop window. Afterwards, place that HTML code in your web page and the video is now embedded.
But if the video is not found on YouTube for whatsoever reason? In the case you would like to attach video from your local files, it is necessary to introduce the following code:
The controls attribute guarantees that the control interfaces are automatically visible whenever the user is making a video. Not applying this attribute means a user cannot see the control interface directly and has to right-click and go into the menu which is quite inconvenient.
Now consider another exercise where we have a simple hero area, and we wish to place a video as its background. How do we achieve that?
First of all, we embed the video using the same code as in the previous section, except that this time we’ll add the autoplay, muted, and loop attributes.
This will display the video, but it will be the wrong size and positioned incorrectly. So we need to fix that with CSS:
1 | video {
|
2 | position: absolute; |
3 | top: 0; |
4 | left: 0; |
5 | width: 100%; |
6 | height: 100%; |
7 | object-fit: cover; |
8 | z-index: -2; |
9 | } |
This aligns the video to the top left, ensures it firmly stays in the page’s view and is placed on the back of all other content. So now it runs in the backdrop of the hero area without any efforts.
Now we understand how to embed a video into a webpage and manage its properties. Embedding a video that occupies a lot of disk space, for instance, a heavy video increases the time needed to load the site which may have negative effects on the overall performance of the site.
As a result, it’s imperative that unless you optimize your videos for the web, you do not publish them. First things first, with video formats. There are two formats that you should pay special attention to:
It is advisable to say that videos on the web can be optimized through the use of WEBM format. One may employ a freeware application known as Handbrake in order to achieve such objectives. According to him, this involves opening the MP4 file and then saving it as WEBM, choosing a quality at a preset which which is most suited. Usually, the resultant file would be considerably smaller, in my case it is about 50 percent the size.
However, in the event that you wish to solely upload video files, here is a small segment of code which should be implemented if you are worried about interoperability with older browsers:
Doing it this way means the browser will use the smaller WEBM file by default, but if the browser doesn’t support WEBM, it can use the MP4 file as a fallback.
Likewise, keep resolution in mind. As background video for a hero section, high-definition video is not essential so there’s no need to have one as this would only hamper the loading speed. A video with a smaller size should be utilized instead of a higher definition one.
Now it’s time to shift gears and dive into the amazing world of CSS transitions.
Remember, unlike animations, CSS transitions are pretty limited—they basically animate a property from point A to point B. Next, we’ll see how you can create transitions in CSS.
Now let us focus on practical exercise on the utilization of CSS transitions. This is a simple header which contains a logo and navigation menu. The navigation contains a button which changes its color when you place the cursor on the button.
Applying a transition can help to create a rather gradual shift in color rather than having it be sudden. We can add the transition in CSS using the transition-property, transition-duration, transition-timing-function, and transition-delay properties.
Or, as you see below, we can make them all as one line of CSS code with the help of the transition property.
What prompts the application of transition solely to the element and not to the pseudo-class, for example? There are 2 reasons for the above:
For this lesson, the focus will be to understand CSS transitions and how they can turn static designs into animated designs. As the design transition takes some effort, the designer is required to constantly look at how others are employing transitions and then do it. Here are a few examples.
When the mouse is moved over the elements on the Populum website, a mild transition takes place. Bump gives a slight touch to the box and which then slightly shifts into another position. Yang’s Focusing Collapse repositioned the items which were within the box. It Simple and plain but very effective.
If we take a look at the Marie Weber web page, however, we notice more striking transformations as we hover with our pointer. Let’s first begin with the top corner of each title, there’s again a slight and rather simplistic transition but this time round there is a change to the text. Moving our cursor over to the images on the right allows us to scale them up or down but it also allows us to reduce their opacity. And again, this is another great method as to how motion can be incorporated into a website via transitions.
As previously stated, let’s wrap this month View task in a simple drop-down menu exercise. We have a menu set up and when we hover on the services, we get a submenu. Each submenu link has a different state on hover but everything seems to be happening quite suddenly.
So we can remedy that by making the addition of transitions to smooth things out. We’ll go through every single item in the menu and add transitions in the CSS like so:
Now we have to outline the type of transitions that we would like to impose. In this case I’ve defined a transition-during myself and am applying an ease-in-out timing function. By adding it this way, I make sure that there is a uniform type of transition applied to each element of the page.
The addition of these transitions makes the dropdown menu’s animations much more pleasant. The process is the same though the effects enhance the interaction with the user.
For this next exercise we have an image gallery, which for us is a virtual list of destinations. By hovering on each picture we have information related to each point of interest like the duration of the trip, a map, a brief overview, an icon, and the minimum cost.
The gallery works as it was meant to, however, it is dull and non-moving so let us add some motion to it.
The first problem I am likely to encounter is the impossibility of transitioning a background image in CSS. Hence, what we need to do instead is to duplicate the color overlay as a pseudo-inactivate the objects within a specific region in which the transition will be applied. This is how it looks like:
That applies a nice transition to the overlay, so now we just need to work on the other elements. We’ll do the following:
Here’s the code for the scaling of the image.
For the main block of text, we’ll do this:
And for the footer, we’ll do this:
What happens now is far more interesting because instead of considering the problem as static images, the images scale up and down, and the textual elements seem to slide in from the upper side and lower edge.
That is one more illustration of how you can animate your website by simply making use of transitions.
In this task, we will put transitions to this interesting mock-up weather app based on accordion, which shows the weekly weather forecast summary on the top, and once you click on a particular day, there is a more detailed version that pops up.
We’ll make use of the same concepts from the previous exercises. Execute them one by one and insert transitions for some progress in the movement. Also, remember to provide transition-duration and transition-timing-function for each one of them.
By doing everything that is expected from you in the video, you conclude on a less cluttered web application, where the text and graphics have all been given motion and appear to be more interesting.
Among some of the important points to note down from this part of the course are:
Now we have discussed video along with the transitions; the remaining part has to deal with CSS animations for the rest of this course.
Starting off let’s begin with the definition:
To define CSS animation, it can be defined as the act whereby the elements are designed to smoothly transform or translate from one place or the appearance to another in a span of time. This is done by specifying keyframes which are the intermediate stages of the animation. The animation is executed by transition between the defined keyframes in a smooth manner.
Css animations consist of two parts:
To make keyframes, you start with the phrase @keyframes followed by the name that you would like to give it and then you open curly brackets to start writing the steps: the simplest way is to use the from and to keywords. After that, every step has as many CSS declarations as you deem necessary.
In this example, I’m creating an animation called moveRight which has two steps.
After setting up the keyframes in such a relaxed manner as you would like, there are a few animation properties that you would like to apply the keyframes you have set up to. In most situations the suggested form would go as such:
In this case whatsoever, we are applying the moveRight animation created in the last example to the elements with a class of box. You will note that the code in this example did not use any other properties related to animation. That’s because you don’t have to. The values that you are required to include are at least an animation name and an animation duration; everything else can be used and discarded as required.
Now proceed to the next activity, in which we will apply a “ loading” animation to an SVG image. We are going to make it ‘breath’ which means that it goes slightly bigger than its original size and then comes back.
To achieve this, we will be preparing keyframes to animate for a duration of 3 seconds where the animation begins from scale 1 and moves out to a scale of 1.2 and returns infinitely with ease in and ease out. We’ll use alternate to specify that after 1.2 is reached from 1 there should be a reversal of the animation till 1 is reached.
Here is the CSS:
Earlier in the course, I stated that animations enable us to generate more intricate movement. But what precisely is that intricate movement, and in what way do animations differ from transitions? As a conclusion, here is a table to summarize the differences that exist:
| Animations | Transitions | |
|---|---|---|
| Keyframes | Can have any number of keyframes | Can only have two steps: start and end |
| Looping | Support infinite looping | Can only run once |
| Direction | Can go forward or in reverse, or both | Can only go in one direction |
| State | Can be paused at any point | Cannot be paused—always run to the end |
You should be very careful to only use them where appropriate because they’re both very valuable techniques. When a relatively complex movement that lasts more than two steps and can be interrupted is being performed, animations become very effective. For minimal movement between two forms, transitions are the most effective.
Loading animations are ubiquitous in UI since they are an effective way to relay to the users that some action has been initiated or the status is updating.
The simplest of animations for loading is a rotating dot. It’s still possible, however, to go a little outside the box. Here are a few other interesting rotating figures that do the same thing:
Motion Design for the Web FREE COURSE
In case logo flags can fulfill this function in an adequate manner, a spinning logo can also be used an as impressive CSS loading animation. And naturally you can employ a progress bar that scans from left to right and shows percentage or does not show it.
CSS animations have a positive effect on the users because they tend to instill confidence to the users. Take for instance when filling in a form and am met with a considerable chunk of waiting time, in such an instance I would want to know what is going on and a loading animation would serve just right.
:Motion Design for the Web FREE COURSE
So to refer to the former point, you can create your own CSS loaders or download from hundreds of free loaders that exist in the internet. Lottie animations can also be used. Lottie is the best animation file type to use because it is open source, it is light weight, the quality is high and it can be scaled to any size. Some useful Lottie animations can be found at the official website or on Envato Elements.
Let’s get hands-on and implement a site preloader. We will be incorporating one of our previous demos which is the image gallery displayed during exercise five. Due to its usage of large images, it will be beneficial if a preloaded is induced to those who are on weaker internet connections as they are being given an approximate of how long the loading would take.
First of all, we need to implement a container that will help the site preloader. This is simply a big dark rectangle that will overlay the entire display.
Next, we need to create a spinner. Here’s an easy way to do that in CSS:
What we are essentially doing is forming a square, cut its left and right ends off and then curl the corners so that it appears to be a circle with chunks removed of:
Now let’s animate this. We’re going to rotate it and scale it up a bit.
And now we need to apply that animation by adding animation: .8s ease infinite alternate spinner;.
We’ve already accomplished the obvious task of implementing a beautiful spin animation. As such, our only goal from now on is displaying this animation when the page is being loaded. To do that we will have to write a few lines of JavaScript:
And now we just add appropriate CSS properties to go with it:
And there you have it! We have successfully implemented the website preloader which works on dark background with spin animation while the website is loading and it fades out when the site is fully loaded.
What if we wanted to animate text for our CSS loading animation? That’s what Exercise #9 is all about.
First, we need to create our text in SVG format:
Now, we have to introduce keyframes so as to construct the animation. In the past, we utilized from and to however, we can use percentages and that is what I will do this time. I will start with 0.percent:
And next I will place additional keyframes at 50%, 80%, and 100%. Do you see how we can do more complex animation by putting in percentages? It gives us more variety than simple a first and last point.
This will bring the SVG text to life and make it appear as if it was handwritten. This is achieved by partitioning the text into a series of dashes which are subsequently unified into a solid beam. As the progress of the animation improves towards completion, the gaps of the line begin to slowly fill in, eventually resulting in not only the gaps being turned into a line but the entirety of the text sinking into a solid color. And when it reverses, the dashes progressively reduce in size until they completely vanish.
And that is how onomatopoeic SVG text loading animations are achieved!
In exercise 10 we have even more simple login form where all we need to do is enter our name and a password and click the button that says “Log In”. But just in case there is the need to process it, a login action takes time, I want to also make sure to incorporate some form of indicator.
This can be done by introducing a loading animation using CSS while embracing a short pause through JavaScript. Here’s a JavaScript solution to accomplish this. The delayed action is merely a 4-second pause that results in an alteration of the button’s class, while also very much replicating the action of signing a term or agreement.
This is the only requirement for JavaScript, the remaining will all be done through CSS. First, we need to add three empty divs to create three white circles using the below CSS:
This adds three white dots to the login button:
Now we have to animate these dots. Basically this css makes them to blink on and off; they start scaling from 0 to 1 between 0% and 40%, then scale back down from 40% to 80%, pause between 80 and 100%. And it will keep repeating thanks to the infinite value.
That animates all the three buttons together but to get more control over the display we can do a staggered animation by turning each dot on in a sequence, we can achieve this goal by setting a delay:
As the animation is now functioning, we need to strategically situate the dots. Moreover, we want the text questions to be replaced by dots once the button is pressed but switch back to the earlier text after a period of 4 seconds. Here’s the CSS to achieve this.
Finally, we can implement a few CSS changes to alter the cursor while the request is being processed and also to alter the background color of the button once it is done.
As a result, that’s how a UI interface can be loaded with javascript and CSS in a different animation type.
Now we are going to discuss about adding animation to illustrations and icons. There are those who will argue that animated illustrations or icons are simply decorations, but I beg to differ. I believe that these animations can add value, and if executed properly, they can significantly improve the user experience in various aspects:
Majorly in this course I will be teaching you how to develop animated icons and illustrations from the very first steps, however, I would like to start by explaining how simple the process of using LottieFiles is for adding animated icons within a couple of clicks.LottieFiles Hopefully at least this time, I will appreciate the place where I made a separate demonstration. A page was designed with a video background. The page had a heading and a mouse icon right below it where the cursor was, but instead I would want to make a moving version of that icon.
All I have to do is go to the LottieFiles website and pick an icon, in my case this simple scroll down icon to work with.
You can make a wider range of modifications right on the website and then click Handoff and Embed. Tick Enable Asset Link and select then the format Lottie JSON and simply copy the code and paste it into the HTML of your website. You can also change settings such as the size I had to set the width and height to 80px and there you go, a working animation.
If you don’t locate the exact animation you are looking for, say on LottieFiles, what’s next? Make your own animations! Now let’s proceed in turning a simple menu icon into an animated one.
For this exercise we have a website created and in it we want to have an animated menu icon that appears in the top left corner. It will be a hamburger menu icon which will be an X when clicked.
First, let’s start off by adding three spans in the HTML to create the three lines needed in the hamburger menu. After that, we will go to the styling section and create the icon with some very basic CSS. This is for the menu icon as a whole:
And this is for the three span lines that make up the icon:
How then do we animate them so that they morph into an X when the dropdown menu is opened? It is actually pretty straightforward. In this case we have three lines but an X has only two lines. As such we have to:
Here’s what that looks like when translated into CSS:
That’s acceptable, but it generates a jerk from one state to another. Thus, let us include a transition in order to improve the appearance:
And that’s how you can easily turn a hamburger icon into an X and vice versa.
Let us take advantage of the same demo we previously used, but this time, the illustration we’re going to focus on will be animated. There’s something notable about the Envato elements illustration: it is built in layers, which makes motion graphics much easier to do. You can find the illustration here:
We are first going to import the illustration into Figma and then we can begin animating it.
The purpose here is to properly group the elements we want to animate, in this case the stars, the location pin, the icons, and the dotted line and also Create the dotted line in Figma to replace it with an easily animable version.
Now it’s time to export so first check Include ‘id’ then select Copy as SVG. After this, it’s time to switch to the code editor and paste the code into HTML.
Now, we can begin animating every single element, let’s begin with the stars. Here’s a simple animation to get the stars twinkling.
But for now, the stars are being sized up and down over the middle of the whole interface that is the picture, in that case we need to insert this code, in order to fix that problem:
1 | #illustration * {
|
2 | transform-box: fill-box; |
3 | } |
In that case, we can simply assign varying levels of animation delays to each star so they can twinkle individually instead of doing everything in synchronization.
Okay, now that we have done the location pin, let’s integrate the animation. In this case, I would say a good example of a location pin animation would be a “bounce” but it is also quite tedious to build it from scratch with keyframes.
Fortunately for us, we have a great premade animation which comes from Animate.css. All that really needs to be done is head over to the Animate.css website, look for an animation, copy the code and paste it into your code editor. Simple enough!
The dotted line is also pretty simple, however this time we will only be utilizing CSS. In order to create the style of the dotted line and to provide it with a minimal animation we will use the following CSS:
And that’s it! The dashed line now slowly traverses from the left to the right. It is a smooth animation which is okay in this case, especially when the approach is to animate multiple elements at once, you want each one to be relatively quite simple.
At last we aim to add animation to the icons. I want them to simmer and expand a little and them gradually shrink, that’s how I want the breathing effect to be like. This is how we can add the breathing effect:
Nevertheless, this is not the output I seek. It is critical that each of the icons enlarges and reduces in size over time and sequentially. Sure, the code provided earlier works well the first time however, it only allows for a simultaneous loop afterwards.
This is now a limitation with the use of CSS. What we can however do is end the animation and use JavaScript to initiate the animation once more by removing infinite.
What we are doing is taking off the animated class from every single one of the icons and then putting it back on. We do this every 6 seconds. After that, we do a document reflow to reset the animation.
For the next task we are going to start animating a character’s walking cycle. We will be working on a video game where we want to give the player the ability to choose a character so when the player clicks a character, it will start walking.
In order to achieve this, I purchased a few animated characters from eEnvato Elements. They can be located in this collection. Each one is packaged with a suite of eight different images that are used to make a walking animation.
In order to create the animation, I proceeded to open Adobe Illustrator, extracted each SVG file, and inserted it into a frame that had the same width and height of 520 by 880 pixels. Next, I consolidated all the group of images and imported it as SVG onto my code. This way, we have achieved a walking sequence for all the characters as well.
Now, we just need to configure the CSS as follows:
And add the animation:
And now the characters all start walking when we select them.
steps for the timing function, instead of linear. Steps is a timing function that allows us to break the animation or transition into segments. We specify the total number of steps minus 1, so in this case 7.Now, let’s move on and learn how to create accent animations.
“In web design, accent animations are small, purposeful animations that enhance the visual storytelling and user experience without being the main focus.”
Naturally, the categories of this course overlap which can also happen with loading animations and accents or scroll interactions and applications. So I’m focusing on the main function of these types of animations but in the end these are all motion design assets.
And accent animations can of course have a different purpose which is:
For our next exercise, I’m going to show you how to animate a logo.
First, download the logo from Envato Elements:
Next, recreate it in Figma so that you have three paths on three separate layers.
Next, export it while ensuring that the “id” attributes option has been checked previously and paste the svg into your code editor.
At this point, we are ready to start animating too. This time we will be working with GSAP which is a very useful and simple to use animation library. The following code which you may also copy and paste from the GSAP webpage will allow us use the core library and the DrawSVG plugin:
We are GSAP integrations done now. So let’s quickly animate the middle segment of the logo using the tool.
It is typical GSAP syntax. First it is specified which class we will target (in our case it is class #middle), then we describe how the animation is going to move from point A to point B. The easing code above has been copied and pasted from GSAP website where they provide an “Ease Visualizer” which helps users to exactly what each easing effect looks like and as a result the user chooses the one that they want to use.
One of the most amazing facts about GSAP is that it allows you to create timelines, that is, a chain of events. Now, let’s make a timeline ourselves.
In the first step, we will define a new timeline and use it to animate the middle section of the logo. Here is what we do:
Next, we will utilize DrawSVG to create an effect for the left half of the logo that seems to appear animated and being sketched out.
The initial percentages indicate these changes begin at this end of the line as 100%. The other percentages correspond to the portion of the line that is animated i.e., 0% to 100% of the animated portion.
Now, let’s do a similar process for the right side of the logo.
In the end, let me ask this one question; what if I want to repeat this animation? Well, there are some parameters that one can set in the timeline and we can simply go to it. The below code plays the animation in a repeat loop with 1.6 seconds of pause between each animation cycle and with ‘yoyo: true’, it will play in a cycle meaning it will play in forwards direction first and then backwards.
We’re going to use GSAP for our next exercise to type out a word and then the word gets removed only to be replaced by a different word.
For this animation, we’ll be using the GSAP Text plugin.
First, we need to set up the HTML as follows. The first span is for the sequence of words, and the second one is for the cursor.
Next, we define the words that will rotate indefinitely and create the main timeline:
Then, for each word, we use the Text plugin to type out the word and append that timeline to the main one:
Using just two timelines with a straightforward method was sufficient to create a gap in the typing effect. Now, we can proceed to improve the cursor by adding a flashing effect to it and ensuring that it remains visible while text is being typed or erased.
And then we tie it into our original timeline with some events:
In this lesson, we have made a cool typewriter effect utilizing GSAP and some CSS. Clearly, it is GSAP, together with its plugins, which allows us to generate quite complicated animations with ease.
Now let’s create some interactive animations.
Here are four reasons you should be using interactive animations:
Now let’s create a “mouse follow” effect, where a button appears to follow our mouse as we move the cursor around it. It’s inspired by the awesome effects on Dennis Snellenberg’s website.
We’ll start by adding a small amount of HTML:
And then we’ll apply some basic CSS styling to make the button look like this:
For the animation, we’ll use GSAP again. First we define events for the mouse moving over the button and the mouse leaving the button, and we create event listeners for both of those.
First of all, let’s create some constants.
Now let’s define what happens when we move our mouse cursor over the button.
Now let’s add the animation effects for this. To get it to work properly, we’ll also need to add display: flex to .magneto in our CSS.
Now, all we need to do is define what happens when we leave the button—we want it to bounce back to where it started. We can do it like this:
In one Of My Earlier Lectures, I Discussed Scroll Animations And Its Purpose, So Let Us Focus On What Is Necessary To Achieve That.
As I already stated there are several ways of creating scroll-related animations. Although it is not widely embraced at this point in time, CSS scroll-timeline could be utilized. Another option is the Intersection Observer API. However, in this case, I prefer GSAP.
After implementing the library and plugin as well as pasting in some recommended code snippets, you should already notice that scrolling on your site has improved; you can clearly sense a bit of easing when the mouse scrolls.
However, on our demo page, we’re going to step up the game and bring in the image and text of the portfolio onto the page till both images are on the opposite sides.
To do that, we’ll start by writing the following code to move the image (entryMedia) off the page to the right and the text (entryMeta) off the page to the left:
Now let’s animate them into view. Notice the scrub: true line—this ties the progress of the animation to the movement of the cursor, so that it plays when you scroll down, pauses when you stop scrolling, and reverses when you scroll back up.
However, I also intend to pursue another popular animation type, parallax animation,” which appears to be the most popular among students and is slightly useful at the current stage of the work.
“In web design, parallax is a technique where background elements move slower than foreground elements, and this creates an illusion of depth. It adds a dynamic, almost 3D feel to a website.”
Check out this example of parallax animation from the Firewatch website. As you scroll down the page, the layers in the background scene move at different speeds, making it look as if the perspective is changing.
Now, let’s see how we personalize this parallax animation. In this demo website that we will work on we have a background image, and this time we would like to add a parallax effect while scrolling down.
As with our previous example, the first step is to open the SVG file in Figma and arrange the components of the illustration into layers in order to make it easier to animate them. After that simply export that as an SVG and place that into your website source code.
Now, we can create divs for each group with different data-speed properties so that the groups will be animated at various speeds.
Motion Design for the Web FREE COURSE Now we add some CSS for the illustration:
Add more CSS for the different elements of the illustration, using div[id*='wolves-bg-'] to target all of them.
And then add all the elements of the illustration on top of each other.
We now have a layered image that we can play around with using GSAP. We’ll start by defining constants:
Motion Design for the Web FREE COURSE Now we create a GSAP timeline for our parallax animation:
And that creates a beautiful, smooth parallax scrolling animation.
There is one additional issue we should touch on, and it is the interrelation of motion design and responsive design before we close this matter up.
First and foremost, I think it’s important to clarify scope of this problem. When talking about focus on motion in the web project, a motion graphic uses web responsive design and I think there are three reasons to consider it: Motion Design for the Web FREE COURSE
Motion Design for the Web FREE COURSE
Thank you very much, and have a good day.
This wraps up this final section of the larger web motion design course.
When working on web motion design, what do you find difficult the most? That is something I hope this course was able to assist you with and possibly some of your questions as well.
Motion Design for the Web FREE COURSE
Definitive Guide to Buyer Personas for Beginners Understand the useful techniques to develop your buyer personas. This is effective in planning the marketing strategy for
How to market to Gen Z and young professionals in 2025 How to market to Gen Z and young professionals in 2025 When considering the
Motion Design for the Web Free Course Welcome to This Motion Design Course Welcome to this course on motion graphics. No matter if you are
Free Premiere Pro Course for beginners Course Introduction and Overview At the moment, Premiere Pro is considered to be one of the best video editing
Welcome to the Graphic Design Basics Free Course! Whether you’re looking to start a career in graphic design or simply want to enhance your skills, this course covers essential concepts to help you communicate visually. Discover the rich history of graphic design, from ancient cave paintings to modern digital tools, and learn about fundamental design principles like balance, contrast, and typography. Dive into color theory and explore how colors influence perception and behavior. Join us on this creative journey and unlock your potential as a graphic designer!