Author: admin

The automotive industry is certainly one of the industries that invest the most in online ads, every day I see countless advertisements from different car brands. Almost every new car model can be found on the Web. Within the abundance of ads it is not exactly easy to create a unique and catchy ad for the client, so every bit to make it more interesting is welcome! Here I will show how to use HTML5, Javascript, CSS and TweenMax to create a nice animation that looks nice on the ads and makes it more catchy and realistic.
 
In my opinion, a very good visual trick is to let car to drive into the viewport – a requirement that was often made my clients. After all, driving is exactly what cars should do and thus provides a direct link to the benefits and inspiration we want the customer to feel. Only the car driving in isn’t necessarily enough, it should also look reasonably realistic. The spinning of the car tires or rims plays an important role (otherwise the car would practically “float” over the ground).
 
Here I would like to describe how the following animation was created:
 

 
For the animation we create two <div> elements, an element that contains the rim and a parent element. It is important to have two <div>’s here because we want to rotate the tire/rim, but we still need to adjust the angle so that it fits the car image perfectly. It is also helpful to put both tires in a container together with the car image, so that you can move all elements together when animating the parent container.
 
It is important to have an image of the car with a transparent background and a good frontal image of the tire or the rim (ask your customer, they will certainly be able to help you) 🙂
 

Images of car itself and its wheel with transparent background – ©Pixabay

And here comes the essential part: first we integrate the images into the HTML:

HTML

 

<div id="autoContainer">
    <div id="reifen1">
        <img src="assets/felge.png" id="felge1">
    </div>
    <div id="reifen2">
        <img src="assets/felge.png" id="felge2">
    </div>
    <img src="assets/auto.png" id="auto">
</div>

 
Then we add the CSS for the wheels:
 

CSS

#reifen1 {
    position: absolute;
    left: 415px;
    top: 158px;
    z-index: 11;
    transform: rotateY(-33deg) skewX(-7deg);
    -webkit-transform: rotateY(-33deg) skewX(-7deg);
    -moz-transform: rotateY(-33deg) skewX(-7deg);
}

#felge1 {
    height: 45px;
    width: auto;
}

 
As you can see above, we specified a skew/inclination of the element #reifen1 to match the angle of the tires in the car image. Without this skew, the whole thing would look like in the picture below and would “wobble” while rotating:
 

(left: wrong angle, right: correct angle)

 
Now we just have to rotate the #felge1 element. For this I like to use TweenMax with a code snippet that makes the #felge1 rotate endlessly. The second snippet makes sure that the timeScale of the tweens is set to 0, so that the tires slowly decelerate towards the end of the animation, when the car is supposed to stop.
 

Javascript

function startReifen() {
    reifenTween= new TweenMax("#felge1, #felge2", 0.25, {
        rotation: '-=360_cw',
        ease: Linear.easeNone,
        repeat: -1
    });

    TweenMax.to(reifenTween, 1.0, { 
        timeScale: 0, 
        delay: 1.1, 
        ease: Back.easeOut.config(0.6) 
    });
    return reifenTween;
}

 
You can play with all parameters until you have found the best result for your individual need. For example, you can rotate the wheels in the other direction with rotation: ‘+= 360_cw’ or change the length or delay of the animation. Anyway, this is a good approach for a realistic and cheerful animation.
 
I hope to have helped with this post! Please leave your Questions and criticism in the comments, I will be happy to get back to you!