Loops Timing functions

Change the default animation timing function to any of three predefined types

Overview

Every loop has their own default animation-timing-function which suits its best, but you can change it to the one of the three built-in types.

Syntax

Use data-tor-loop="<variant> <animation-timing-function>". Here is the list with the animation-timing-function available:

NameAnimation-timing-function
quadcubic-bezier(0.23, 0, 0, 1)
exponentialcubic-bezier(.9, 0, .1, 1)
bouncecubic-bezier(.9, 0, .1, 1)

Examples

Built-in animation types with the default examples along with the modified ones.

Blink
Blink
Blink
Blink
<!-- Default -->
<div data-tor-loop="blink">Blink</div>

<!-- Custom -->
<div data-tor-loop="blink quad">Blink</div>
<div data-tor-loop="blink exponential">Blink</div>
<div data-tor-loop="blink bounce">Blink</div>

Circle

Circle
Circle
Circle
Circle
<!-- Default -->
<div data-tor-loop="circle">Circle</div>

<!-- Custom -->
<div data-tor-loop="circle quad">Circle</div>
<div data-tor-loop="circle exponential">Circle</div>
<div data-tor-loop="circle bounce">Circle</div>

Jump

Jump
Jump
Jump
Jump
<!-- Default -->
<div data-tor-loop="jump">Jump</div>

<!-- Custom -->
<div data-tor-loop="jump quad">Jump</div>
<div data-tor-loop="jump exponential">Jump</div>
<div data-tor-loop="jump bounce">Jump</div>

Float

Float
Float
Float
Float
<!-- Default -->
<div data-tor-loop="float">Float</div>

<!-- Custom -->
<div data-tor-loop="float quad">Float</div>
<div data-tor-loop="float exponential">Float</div>
<div data-tor-loop="float bounce">Float</div>

Pulse

Pulse
Pulse
Pulse
Pulse
<!-- Default -->
<div data-tor-loop="pulse">Pulse</div>

<!-- Custom -->
<div data-tor-loop="pulse quad">Pulse</div>
<div data-tor-loop="pulse exponential">Pulse</div>
<div data-tor-loop="pulse bounce">Pulse</div>

Radiate

Radiate
Radiate
Radiate
Radiate
<!-- Default -->
<div data-tor-loop="radiate(primary)">Radiate</div>

<!-- Custom -->
<div data-tor-loop="radiate(primary) quad">Radiate</div>
<div data-tor-loop="radiate(primary) exponential">Radiate</div>
<div data-tor-loop="radiate(primary) bounce">Radiate</div>

Spin

Spin
Spin
Spin
Spin
<!-- Default -->
<div data-tor-loop="spin">Spin</div>

<!-- Custom -->
<div data-tor-loop="spin quad">Spin</div>
<div data-tor-loop="spin exponential">Spin</div>
<div data-tor-loop="spin bounce">Spin</div>

Swing

Swing
Swing
Swing
Swing
<!-- Default -->
<div data-tor-loop="swing">Swing</div>

<!-- Custom -->
<div data-tor-loop="swing quad">Swing</div>
<div data-tor-loop="swing exponential">Swing</div>
<div data-tor-loop="swing bounce">Swing</div>

Wobble

Horizontal

Wobble
Wobble
Wobble
Wobble
<!-- Default -->
<div data-tor-loop="wobble.h">Wobble</div>

<!-- Custom -->
<div data-tor-loop="wobble quad">Wobble</div>
<div data-tor-loop="wobble.h exponential">Wobble</div>
<div data-tor-loop="wobble.h bounce">Wobble</div>

Vertical

Wobble
Wobble
Wobble
Wobble
<!-- Default -->
<div data-tor-loop="wobble-v">Wobble</div>

<!-- Custom -->
<div data-tor-loop="wobble-v quad">Wobble</div>
<div data-tor-loop="wobble-v exponential">Wobble</div>
<div data-tor-loop="wobble-v bounce">Wobble</div>