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:
| Name | Animation-timing-function |
|---|---|
quad | cubic-bezier(0.23, 0, 0, 1) |
exponential | cubic-bezier(.9, 0, .1, 1) |
bounce | cubic-bezier(.9, 0, .1, 1) |
Examples
Built-in animation types with the default examples along with the modified ones.
Blink
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>