Enhanced Bootstrap Grow & Shrink

Built in Grow & Shrink PRO

Grow up or shrink down an element with scale transform animation

Overview

Change the element’s size using {grow|grow--out} (scale up) or {shrink|shrink--in} (scale down) effects on various triggers. Add --small modifier to reduce the initial/final size of the element.

Examples

Grow and shrink animation on hover using the delay[{value}] to create a gradual effect.

Hover me

This text will shrink

I've just grown

CSS block effect example 
<div data-fx-trigger="hover hover-fix">

  <h2>
    <span data-fx="hover/T:shrink">This</span>
    <span data-fx="hover/T:shrink delay[50ms]">text</span>
    <span data-fx="hover/T:shrink delay[100ms]">will</span>
    <span data-fx="hover/T:shrink delay[150ms]">shrink</span>
  </h2>

  <h2>
    <span data-fx="hover/T:grow">I've</span>
    <span data-fx="hover/T:grow delay[50ms]">just</span>
    <span data-fx="hover/T:grow delay[100ms]">grown</span>
  </h2>

</div>

Grow

A grow effect will apply a scale up transform animation in various variants.

Triggers

To grow an element when {trigger} is performed on a single element, use data-fx="{trigger}:{grow-variant} where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {grow-variant} is one of the:

  • grow set element scale from 0 to 1 (not applicable for hover)
  • grow--out set element scale from 1 to 2
  • grow--small set element scale from 0.75 to 1
  • grow--out--small set element scale from 1 to 1.25
Grow out
Grow small
Grow out small
<div data-fx="hover:grow--out">Grow</div>
<div data-fx="hover:grow--small">Grow small</div>
<div data-fx="hover:grow--out--small">Grow out small</div>
Grow
Grow out
Grow small
Grow out small
Grow x
Grow y
          













<div data-fx="active:grow">Grow</div>
<div data-fx="active:grow--out">Grow out</div>
<div data-fx="active:grow--small">Grow small</div>
<div data-fx="active:grow--out--small">Grow out small</div>
<div data-fx="active:grow--x">Grow x</div>
<div data-fx="active:grow--y">Grow y</div>

Scroll into view to toggle .inview class

Grow
Grow out
Grow small
Grow out small
Grow x
Grow y
          













<div data-fx="inview:grow">Grow</div>
<div data-fx="inview:grow--out">Grow out</div>
<div data-fx="inview:grow--small">Grow small</div>
<div data-fx="inview:grow--out--small">Grow out small</div>
<div data-fx="inview:grow--x">Grow x</div>
<div data-fx="inview:grow--y">Grow y</div>

Parent triggers

To grow an element of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:{grow-variant} attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {grow-variant} is one of the:

  • grow set element scale from 0 to 1 (not applicable for hover)
  • grow--out set element scale from 1 to 2
  • grow--small set element scale from 0.75 to 1
  • grow--out--small set element scale from 1 to 1.25

Hover over the wrapper:

Grow
Grow out
Grow small
Grow out small
Grow x
Grow y
          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:grow">Grow</div>
  <div data-fx="hover/T:grow--out">Grow out</div>
  <div data-fx="hover/T:grow--small">Grow small</div>
  <div data-fx="hover/T:grow--out--small">Grow out small</div>
  <div data-fx="hover/T:grow--x">Grow x</div>
  <div data-fx="hover/T:grow--y">Grow y</div>
</div>

Click the wrapper to toggle .active class:

Grow
Grow out
Grow small
Grow out small
Grow x
Grow y
          













<div data-fx-trigger="active">
  <div data-fx="active/T:grow">Grow</div>
  <div data-fx="active/T:grow--out">Grow out</div>
  <div data-fx="active/T:grow--small">Grow small</div>
  <div data-fx="active/T:grow--out--small">Grow out small</div>
  <div data-fx="active/T:grow--x">Grow x</div>
  <div data-fx="active/T:grow--y">Grow y</div>
</div>

Scroll into view to toggle .inview class on parent

Grow
Grow out
Grow small
Grow out small
Grow x
Grow y
          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:grow">Grow</div>
  <div data-fx="inview/T:grow--out">Grow out</div>
  <div data-fx="inview/T:grow--small">Grow small</div>
  <div data-fx="inview/T:grow--out--small">Grow out small</div>
  <div data-fx="inview/T:grow--x">Grow x</div>
  <div data-fx="inview/T:grow--y">Grow y</div>
</div>

Shrink

A shrink effect will apply a scale down transform animation in various variants.

Triggers

To shrink an element when {trigger} is performed on a single element, use data-fx="{trigger}:{shrink-variant} where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {shrink-variant} is one of the:

  • shrink set element scale from 1 to 2
  • shrink--in set element scale from 2 to 1
  • shrink--small set element scale from 1 to 0.75
  • shrink--in--small set element scale from 1.25 to 1

Hover over the elements:

Shrink
Shrink in
Shrink small
Shrink in small
Shrink x
Shrink y
          













<div data-fx="hover:shrink">Shrink</div>
<div data-fx="hover:shrink--in">Shrink in</div>
<div data-fx="hover:shrink--small">Shrink small</div>
<div data-fx="hover:shrink--in--small">Shrink in small</div>
<div data-fx="hover:shrink--x">Shrink x</div>
<div data-fx="hover:shrink--y">Shrink y</div>
Shrink
Shrink in
Shrink small
Shrink in small
Shrink x
Shrink y
          













<div data-fx="active:shrink">Shrink</div>
<div data-fx="active:shrink--in">Shrink in</div>
<div data-fx="active:shrink--small">Shrink small</div>
<div data-fx="active:shrink--in--small">Shrink in small</div>
<div data-fx="active:shrink--x">Shrink x</div>
<div data-fx="active:shrink--y">Shrink y</div>

Scroll into view to toggle .inview class

Shrink
Shrink in
Shrink small
Shrink in small
Shrink x
Shrink y
          













<div data-fx="inview:shrink">Shrink</div>
<div data-fx="inview:shrink--in">Shrink in</div>
<div data-fx="inview:shrink--small">Shrink small</div>
<div data-fx="inview:shrink--in--small">Shrink in small</div>
<div data-fx="inview:shrink--x">Shrink x</div>
<div data-fx="inview:shrink--y">Shrink y</div>

Parent triggers

To shrink an element of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:{shrink-variant} attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {shrink-variant} is one of the:

  • shrink set element scale from 1 to 2
  • shrink--in set element scale from 2 to 1
  • shrink--small set element scale from 1 to 0.75
  • shrink--in--small set element scale from 1.25 to 1

Hover over the wrapper:

Shrink
Shrink in
Shrink small
Shrink in small
Shrink x
Shrink y
          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:shrink">Shrink</div>
  <div data-fx="hover/T:shrink--in">Shrink in</div>
  <div data-fx="hover/T:shrink--small">Shrink small</div>
  <div data-fx="hover/T:shrink--in--small">Shrink in small</div>
  <div data-fx="hover/T:shrink--x">Shrink x</div>
  <div data-fx="hover/T:shrink--y">Shrink y</div>
</div>

Click the wrapper to toggle .active class:

Shrink
Shrink in
Shrink small
Shrink in small
Shrink x
Shrink y
          













<div data-fx-trigger="active">
  <div data-fx="active/T:shrink">Shrink</div>
  <div data-fx="active/T:shrink--in">Shrink in</div>
  <div data-fx="active/T:shrink--small">Shrink small</div>
  <div data-fx="active/T:shrink--in--small">Shrink in small</div>
  <div data-fx="active/T:shrink--x">Shrink x</div>
  <div data-fx="active/T:shrink--y">Shrink y</div>
</div>

Scroll into view to toggle .inview class on parent

Shrink
Shrink in
Shrink small
Shrink in small
Shrink x
Shrink y
          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:shrink">Shrink</div>
  <div data-fx="inview/T:shrink--in">Shrink in</div>
  <div data-fx="inview/T:shrink--small">Shrink small</div>
  <div data-fx="inview/T:shrink--in--small">Shrink in small</div>
  <div data-fx="inview/T:shrink--x">Shrink x</div>
  <div data-fx="inview/T:shrink--y">Shrink y</div>
</div>