Built in Scale

Scale up or down the elements or images with predefined values, or add your custom one

Overview

This effect will make resizing (scaling) of your elements a piece of cake. It can be also used to scale the regular images or background images when they’re used within the .bg wrapper.

Triggers

Scale

To scale the element when <trigger> is performed on a single element, use data-tor-fx="<trigger>:scale.to(<value>) 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
scale.to(0)
scale.to(25)
scale.to(75)
scale.to(150)
scale.to(175)
scale.to(200)
<div data-tor-fx="hover:scale.to(0)">scale.to(0)</div>
<div data-tor-fx="hover:scale.to(25)">scale.to(25)</div>
<div data-tor-fx="hover:scale.to(75)">scale.to(75)</div>
<div data-tor-fx="hover:scale.to(150)">scale.to(150)</div>
<div data-tor-fx="hover:scale.to(175)">scale.to(175)</div>
<div data-tor-fx="hover:scale.to(200)">scale.to(200)</div>
scale.to(0)
scale.to(25)
scale.to(75)
scale.to(150)
scale.to(175)
scale.to(200)
<div data-tor-fx="active:scale.to(0)">scale.to(0)</div>
<div data-tor-fx="active:scale.to(25)">scale.to(25)</div>
<div data-tor-fx="active:scale.to(75)">scale.to(75)</div>
<div data-tor-fx="active:scale.to(150)">scale.to(150)</div>
<div data-tor-fx="active:scale.to(175)">scale.to(175)</div>
<div data-tor-fx="active:scale.to(200)">scale.to(200)</div>
scale.to(0)
scale.to(25)
scale.to(75)
scale.to(150)
scale.to(175)
scale.to(200)
<div data-tor-fx="inview:scale.to(0)">scale.to(0)</div>
<div data-tor-fx="inview:scale.to(25)">scale.to(25)</div>
<div data-tor-fx="inview:scale.to(75)">scale.to(75)</div>
<div data-tor-fx="inview:scale.to(150)">scale.to(150)</div>
<div data-tor-fx="inview:scale.to(175)">scale.to(175)</div>
<div data-tor-fx="inview:scale.to(200)">scale.to(200)</div>

Scale from

To scale the element back to its original size when <trigger> is performed on a single element, use data-tor-fx="<trigger>:scale.from(<value>) 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
scale.from(0)
scale.from(25)
scale.from(50)
scale.from(75)
scale.from(125)
scale.from(150)
scale.from(175)
scale.from(200)
<div data-tor-fx="hover:scale.from(0)">scale.from(0)</div>
<div data-tor-fx="hover:scale.from(25)">scale.from(25)</div>
<div data-tor-fx="hover:scale.from(50)">scale.from(50)</div>
<div data-tor-fx="hover:scale.from(75)">scale.from(75)</div>
<div data-tor-fx="hover:scale.from(125)">scale.from(125)</div>
<div data-tor-fx="hover:scale.from(150)">scale.from(150)</div>
<div data-tor-fx="hover:scale.from(175)">scale.from(175)</div>
<div data-tor-fx="hover:scale.from(200)">scale.from(200)</div>
scale.from(0)
scale.from(25)
scale.from(50)
scale.from(75)
scale.from(125)
scale.from(150)
scale.from(175)
scale.from(200)
<div data-tor-fx="active:scale.from(0)">scale.from(0)</div>
<div data-tor-fx="active:scale.from(25)">scale.from(25)</div>
<div data-tor-fx="active:scale.from(50)">scale.from(50)</div>
<div data-tor-fx="active:scale.from(75)">scale.from(75)</div>
<div data-tor-fx="active:scale.from(125)">scale.from(125)</div>
<div data-tor-fx="active:scale.from(150)">scale.from(150)</div>
<div data-tor-fx="active:scale.from(175)">scale.from(175)</div>
<div data-tor-fx="active:scale.from(200)">scale.from(200)</div>
scale.from(0)
scale.from(25)
scale.from(50)
scale.from(75)
scale.from(125)
scale.from(150)
scale.from(175)
scale.from(200)
<div data-tor-fx="inview:scale.from(0)">scale.from(0)</div>
<div data-tor-fx="inview:scale.from(25)">scale.from(25)</div>
<div data-tor-fx="inview:scale.from(50)">scale.from(50)</div>
<div data-tor-fx="inview:scale.from(75)">scale.from(75)</div>
<div data-tor-fx="inview:scale.from(125)">scale.from(125)</div>
<div data-tor-fx="inview:scale.from(150)">scale.from(150)</div>
<div data-tor-fx="inview:scale.from(175)">scale.from(175)</div>
<div data-tor-fx="inview:scale.from(200)">scale.from(200)</div>

Parent triggers

Scale

To scale the element of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-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 be affected (will change)

Than add data-tor-fx="<trigger>:scale.to(<value>) 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
scale.to(0)
scale.to(25)
scale.to(75)
scale.to(150)
scale.to(175)
scale.to(200)
<div data-tor-fx="hover-T:scale.to(0)">scale.to(0)</div>
<div data-tor-fx="hover-T:scale.to(25)">scale.to(25)</div>
<div data-tor-fx="hover-T:scale.to(75)">scale.to(75)</div>
<div data-tor-fx="hover-T:scale.to(150)">scale.to(150)</div>
<div data-tor-fx="hover-T:scale.to(175)">scale.to(175)</div>
<div data-tor-fx="hover-T:scale.to(200)">scale.to(200)</div>
scale.to(0)
scale.to(25)
scale.to(75)
scale.to(150)
scale.to(175)
scale.to(200)
<div data-tor-fx="active-T:scale.to(0)">scale.to(0)</div>
<div data-tor-fx="active-T:scale.to(25)">scale.to(25)</div>
<div data-tor-fx="active-T:scale.to(75)">scale.to(75)</div>
<div data-tor-fx="active-T:scale.to(150)">scale.to(150)</div>
<div data-tor-fx="active-T:scale.to(175)">scale.to(175)</div>
<div data-tor-fx="active-T:scale.to(200)">scale.to(200)</div>
scale.to(0)
scale.to(25)
scale.to(75)
scale.to(150)
scale.to(175)
scale.to(200)
<div data-tor-fx="inview-T:scale.to(0)">scale.to(0)</div>
<div data-tor-fx="inview-T:scale.to(25)">scale.to(25)</div>
<div data-tor-fx="inview-T:scale.to(75)">scale.to(75)</div>
<div data-tor-fx="inview-T:scale.to(150)">scale.to(150)</div>
<div data-tor-fx="inview-T:scale.to(175)">scale.to(175)</div>
<div data-tor-fx="inview-T:scale.to(200)">scale.to(200)</div>

Scale from

To scale the element back to its original size of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-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 be affected (will change)

Than add data-tor-fx="<trigger>:scale.from(<value>) 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
scale.from(0)
scale.from(25)
scale.from(50)
scale.from(75)
scale.from(125)
scale.from(150)
scale.from(175)
scale.from(200)
<div data-tor-fx="hover-T:scale.from(0)">scale.from(0)</div>
<div data-tor-fx="hover-T:scale.from(25)">scale.from(25)</div>
<div data-tor-fx="hover-T:scale.from(50)">scale.from(50)</div>
<div data-tor-fx="hover-T:scale.from(75)">scale.from(75)</div>
<div data-tor-fx="hover-T:scale.from(125)">scale.from(125)</div>
<div data-tor-fx="hover-T:scale.from(150)">scale.from(150)</div>
<div data-tor-fx="hover-T:scale.from(175)">scale.from(175)</div>
<div data-tor-fx="hover-T:scale.from(200)">scale.from(200)</div>
scale.from(0)
scale.from(25)
scale.from(50)
scale.from(75)
scale.from(125)
scale.from(150)
scale.from(175)
scale.from(200)
<div data-tor-fx="active-T:scale.from(0)">scale.from(0)</div>
<div data-tor-fx="active-T:scale.from(25)">scale.from(25)</div>
<div data-tor-fx="active-T:scale.from(50)">scale.from(50)</div>
<div data-tor-fx="active-T:scale.from(75)">scale.from(75)</div>
<div data-tor-fx="active-T:scale.from(125)">scale.from(125)</div>
<div data-tor-fx="active-T:scale.from(150)">scale.from(150)</div>
<div data-tor-fx="active-T:scale.from(175)">scale.from(175)</div>
<div data-tor-fx="active-T:scale.from(200)">scale.from(200)</div>
scale.from(0)
scale.from(25)
scale.from(50)
scale.from(75)
scale.from(125)
scale.from(150)
scale.from(175)
scale.from(200)
<div data-tor-fx="inview-T:scale.from(0)">scale.from(0)</div>
<div data-tor-fx="inview-T:scale.from(25)">scale.from(25)</div>
<div data-tor-fx="inview-T:scale.from(50)">scale.from(50)</div>
<div data-tor-fx="inview-T:scale.from(75)">scale.from(75)</div>
<div data-tor-fx="inview-T:scale.from(125)">scale.from(125)</div>
<div data-tor-fx="inview-T:scale.from(150)">scale.from(150)</div>
<div data-tor-fx="inview-T:scale.from(175)">scale.from(175)</div>
<div data-tor-fx="inview-T:scale.from(200)">scale.from(200)</div>