Possibly one of the best features of Cubender’s new HTML5 website builder is the ability to transform and animate any element on your page. In a few short steps, I’ll show you how easy it is to get started with some basic animation techniques.
Please note that this article was written for Cubender V4
For the purpose of this tutorial, we’re going to animate a Button with a “Scale” and “Rotate” effect. You can view the final result here.
- To achieve this effect, the first step is to add a Button to your webpage. A Button is navigational item and can be used to link to webpages, download files and more. To add a Button to your page, click the Button widget from the Widget Gallery.
- Now open the Style Menuby clicking the Style menu icon.
- Since we’re interested in doing a hover (or rollover) animation, click the “rollover” toggle.
- Scroll down to the heading “Transform” and click it to open its settings.
- Drag the slider for “scale” until it reads “1.5”. Now hover your mouse over the Button and you’ll notice that it zooms up to 1.5 times its size.
- Drag the slider for “rotation” until it reads “32”. Now hover your mouse over the Button and you’ll notice that it zooms and rotates 32 degrees.
- While the Style Menu is still open, click the wrench icon to show the Advanced Options tabs.
- Finally, to enable a smooth animation simply check the option “Transition Animation”.