<x-gif>

1 min read Original article ↗

The GIF tag the internet deserves

View source on GitHub
Examples:
{{ $index + 1 }}

Normal playback

Something not look right? Post an issue on GitHub with the URL of the image

<x-gif src="{{ trustedUrl() }}"></x-gif>

Ping-pong

<x-gif src="{{ trustedUrl() }}" ping-pong></x-gif>

N-times

{{ gif.nTimes }} 

<x-gif src="{{ trustedUrl() }}" n-times="{{ gif.nTimes }}"{{ nTimesIsStopped() }}></x-gif>

Speed

<x-gif src="{{ trustedUrl() }}" speed="{{ gif.speed }}"></x-gif>

BPM

<x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}"></x-gif>
<x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" snap></x-gif>

Synced to Audio

Playback speed: {{ gif.playbackRate | number:1 }} + -

Loading beat data...

<x-gif src="{{ trustedUrl() }}" synced></x-gif>
<x-gif src="{{ trustedUrl() }}" synced snap></x-gif>

Audio: Encom Part II by Daft Punk. CC0 1.0 Universal.
Source: Archive.org
Beat metadata provided by Echo Nest

See a full screen demo

Stop-start

<x-gif src="{{ trustedUrl() }}" stopped></x-gif>
See demo

Exploded

<x-gif src="{{ trustedUrl() }}" exploded></x-gif>

Explode the gif into its component frames (handy for debugging)

See demo