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>({timing: <value>})". Here is the list of available animation-timing-function:
| 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({timing: quad})">Blink</div>
<div data-tor="loop:blink({timing: exponential})">Blink</div>
<div data-tor="loop:blink({timing: bounce})">Blink</div>Circle
Circle
Circle
Circle
Circle
<!-- Default -->
<div data-tor="loop:circle">Circle</div>
<!-- Custom -->
<div data-tor="loop:circle({timing: quad})">Circle</div>
<div data-tor="loop:circle({timing: exponential})">Circle</div>
<div data-tor="loop:circle({timing: bounce})">Circle</div>Jump
Jump
Jump
Jump
Jump
<!-- Default -->
<div data-tor="loop:jump">Jump</div>
<!-- Custom -->
<div data-tor="loop:jump({timing: quad})">Jump</div>
<div data-tor="loop:jump({timing: exponential})">Jump</div>
<div data-tor="loop:jump({timing: bounce})">Jump</div>Float
Float
Float
Float
Float
<!-- Default -->
<div data-tor="loop:float">Float</div>
<!-- Custom -->
<div data-tor="loop:float({timing: quad})">Float</div>
<div data-tor="loop:float({timing: exponential})">Float</div>
<div data-tor="loop:float({timing: bounce})">Float</div>Pulse
Pulse
Pulse
Pulse
Pulse
<!-- Default -->
<div data-tor="loop:pulse">Pulse</div>
<!-- Custom -->
<div data-tor="loop:pulse({timing: quad})">Pulse</div>
<div data-tor="loop:pulse({timing: exponential})">Pulse</div>
<div data-tor="loop:pulse({timing: bounce})">Pulse</div>Radiate
Radiate
Radiate
Radiate
Radiate
<!-- Default -->
<div data-tor="loop:radiate.primary">Radiate</div>
<!-- Custom -->
<div data-tor="loop:radiate.primary({timing: quad})">Radiate</div>
<div data-tor="loop:radiate.primary({timing: exponential})">Radiate</div>
<div data-tor="loop:radiate.primary({timing: bounce})">Radiate</div>Spin
Spin
Spin
Spin
Spin
<!-- Default -->
<div data-tor="loop:spin">Spin</div>
<!-- Custom -->
<div data-tor="loop:spin({timing: quad})">Spin</div>
<div data-tor="loop:spin({timing: exponential})">Spin</div>
<div data-tor="loop:spin({timing: bounce})">Spin</div>Swing
Swing
Swing
Swing
Swing
<!-- Default -->
<div data-tor="loop:swing">Swing</div>
<!-- Custom -->
<div data-tor="loop:swing({timing: quad})">Swing</div>
<div data-tor="loop:swing({timing: exponential})">Swing</div>
<div data-tor="loop:swing({timing: bounce})">Swing</div>Wobble
Horizontal
Wobble
Wobble
Wobble
Wobble
<!-- Default -->
<div data-tor="loop:wobble.h">Wobble</div>
<!-- Custom -->
<div data-tor="loop:wobble.h({timing: quad})">Wobble</div>
<div data-tor="loop:wobble.h({timing: exponential})">Wobble</div>
<div data-tor="loop:wobble.h({timing: bounce})">Wobble</div>Vertical
Wobble
Wobble
Wobble
Wobble
<!-- Default -->
<div data-tor="loop:wobble.v">Wobble</div>
<!-- Custom -->
<div data-tor="loop:wobble.v({timing: quad})">Wobble</div>
<div data-tor="loop:wobble.v({timing: exponential})">Wobble</div>
<div data-tor="loop:wobble.v({timing: bounce})">Wobble</div>