7. Animation

INTRODUCTIONOrganic Animation

Settings used for example animations from our demo.

Organic Triangle

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_1.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Filled Style,
  • Button Color scheme – Accent font, light background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Organic Triangle (0),
  • Background shape – Smooth Bean (0),
  • Background type – Filled (alternate color).

Triangle Rotation

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_2.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Filled Style,
  • Button Color scheme – Accent font, light background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Triangle Rotation (1),
  • Background shape – Elastic Bean (1),
  • Background type – Outline (alternate color).

Triangle to Circle

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_3.jpg

General:

  • Enter Title,
  • Enter Subtitle,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Filled Style,
  • Button Color scheme – Accent font, light background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Triangle to Circle (2),
  • Background shape – Circle to Elipse (2),
  • Background type – Filled (gray transparent).

Elastic Cloud

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_4.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Outline Style,
  • Button Color scheme – Light font, accent background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Elastic Cloud (3),
  • Background shape – Top Cloud (3),
  • Background type – Filled (alternate color).

Fat Cloud

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_5.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Outline Style,
  • Button Color scheme – Light font, accent background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Fat Cloud (4),
  • Background shape – Fat Bean (4),
  • Background type – Filled (alternate color).

Smooth Cloud

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_6.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Outline Style,
  • Button Color scheme – Light font, accent background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Smooth Cloud (5),
  • Background shape – Left Cloud (5),
  • Background type – Filled (alternate color).

Scaling Bean

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_7.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Clean Style,
  • Button Color scheme – Light font, alternate background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Scaling Bean (6),
  • Background shape – Scaling Bean (6),
  • Background type – Filled (alternate color).

Rotating Bean

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_8.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Clean Style,
  • Button Color scheme – Light font, alternate background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Rotating Bean (7),
  • Background shape – Rotating Bean (7),
  • Background type – Filled (alternate color).

Organic Shape

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_9.jpg

General:

  • Enter Title,
  • Enter Subtitle,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Clean Style,
  • Button Color scheme – Light font, alternate background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Organic Shape (8),
  • Background shape – Organic Shape (8),
  • Background type – Filled (alternate color).

Star to Fat Star

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_10.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Clean Style,
  • Button Color scheme – Light font, alternate background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Star to Fat Star (9),
  • Background shape – Fat Star (9),
  • Background type – Filled (alternate color).

Organic Star

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_11.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Clean Style,
  • Button Color scheme – Light font, alternate background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Organic Star (10),
  • Background shape – Organic Star (10),
  • Background type – Filled (alternate color).

Rotating Star

https://documentation.bold-themes.com/tabula/wp-content/uploads/sites/43/2019/06/animacija_12.jpg

General:

  • Enter Title,
  • Small Title size.

URL:

  •  Button text – ‘Read More’,
  • Button URL,
  • Small Button size,
  • Clean Style,
  • Button Color scheme – Light font, alternate background.

Design:

  • Add Image (size on demo 500px x 500px),
  • Foreground shape – Rotating Star (11),
  • Background shape – Small Elastic Bean (11),
  • Background type – Filled (alternate color).