Pro

Grow & Shrink

Changing the scale of element - it can grows or shrinks

Overview

Use grow or shrink values to make an element bigger or smaller. Default scale distance (CSS scale value) is 1, means that element will grow or shrink by 100% of its size. Read more in Distance section.

Grow (scale up)

Use data-fx="{action}:{grow-direction}" data attribute to scale up the element.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {grow-direction} is one of:

  • grow to scale up an element from 0% to 100% of its size
  • grow-out to scale up an element from 100% to 200% of its size

On hover

To scale up a single element on its hover, add data-fx="h:{grow-direction}" data attribute. Note that h:grow makes the element invisible, because it gets scale: 0, so it’s better to use another {action} described in further topics.

h:grow
h:grow-out
<div data-fx="h:grow">h:grow</div>
<div data-fx="h:grow-out">h:grow-out</div>

On active

To scale up a single element when it gets .active class, add data-fx="a:{grow-direction}" data attribute. Note that h:grow makes the element invisible, because it gets scale: 0, so it’s better to use another {action} described in further topics.

Click the elements to toggle its .active class
a:grow
a:grow-out
<div data-fx="a:grow">a:grow</div>
<div data-fx="a:grow-out">a:grow-out</div>

On trigger hover

Scale up a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:{grow-direction}" data attribute to elements you want to scale up when trigger is hovered.

Hover this trigger
th:grow
th:grow-out
<div data-trigger="hover">
  <div data-fx="th:grow">th:grow</div>
  <div data-fx="th:grow-out">th:grow-out</div>
</div>

On trigger active

Scale up a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:{grow-direction}" data attribute to elements you want to scale up when trigger is hovered.

Click this trigger to toggle its .active class
ta:grow
ta:grow-out
<div data-trigger="active">
  <div data-fx="ta:grow">ta:grow</div>
  <div data-fx="ta:grow-out">ta:grow-out</div>
</div>

Shrink (scale down)

Use data-fx="{action}:{shrink-direction}" data attribute to scale dow the element.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {shrink-direction} is one of:

  • shrink to scale down an element from 100% to 0% of its size
  • shrink-in to scale down an element from 200% to 100% of its size

On hover

To scale down a single element on its hover, add data-fx="h:{shrink-direction}" data attribute.

h:shrink
h:shrink-in
<div data-fx="h:shrink">h:shrink</div>
<div data-fx="h:shrink-in">h:shrink-in</div>

On active

To scale down a single element when it gets .active class, add data-fx="a:{shrink-direction}" data attribute.

Click the elements to toggle its .active class
a:shrink
a:shrink-in
<div data-fx="a:shrink">a:shrink</div>
<div data-fx="a:shrink-in">a:shrink-in</div>

On trigger hover

Scale up a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:{shrink-direction}" data attribute to elements you want to scale up when trigger is hovered.

Hover this trigger
th:shrink
th:shrink-in
<div data-trigger="hover">
  <div data-fx="th:shrink">th:shrink</div>
  <div data-fx="th:shrink-in">th:shrink-in</div>
</div>

On trigger active

Scale up a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:{shrink-direction}" data attribute to elements you want to scale up when trigger is hovered.

Click this trigger to toggle its .active class
ta:shrink
ta:shrink-in
<div data-trigger="active">
  <div data-fx="ta:shrink">ta:shrink</div>
  <div data-fx="ta:shrink-in">ta:shrink-in</div>
</div>

Distance

You can change the default 1 scale distance (value) by adding {grow|shrink}-short value to data-fx attribute. This will lower the scale distance to .8.

It can be combined it with any {action} in data-fx="{action}:grow-*" attribute.

Grow

Using grow-short value in data-fx attribute will change the scale size of:

  • grow will scale up an element from 80% to 100% of its size
  • grow-out will scale up an element from 100% to 120% of its size
h:grow
h:grow-out
<div data-fx="h:grow grow-short">h:grow</div>
<div data-fx="h:grow-out grow-short">h:grow-out</div>
Hover this trigger
th:grow
th:grow-out
th:grow[1.3]
<div data-trigger="hover">
  <div data-fx="th:grow grow-short">th:grow</div>
  <div data-fx="th:grow-out grow-short">th:grow-out</div>
  <div data-fx="th:grow-out grow[1.3]">th:grow[1.3]</div>
</div>

Shrink

Using shrink-short value in data-fx attribute will change the scale size of:

  • shrink to scale down an element from 100% to 80% of its size
  • shrink-in to scale down an element from 120% to 100% of its size
h:shrink
h:shrink-in
<div data-fx="h:shrink shrink-short">h:shrink</div>
<div data-fx="h:shrink-in shrink-short">h:shrink-in</div>
Hover this trigger
th:shrink
th:shrink-in
<div data-trigger="hover">
  <div data-fx="th:shrink shrink-short">th:shrink</div>
  <div data-fx="th:shrink-in shrink-short">th:shrink-in</div>
</div>