How to Display NFT Gift Animations in Telegram
The introduction of NFT gifts in Telegram has raised numerous questions among developers, particularly regarding integration with the TON (The Open Network) blockchain. In this article, we’ll explore the technical aspects of working with animated NFTs and demonstrate how to implement their display in your projects.
I am the developer of the TON Blockchain Explorer, integrated into Telegram, and will guide you through one key question:
How to display NFT animations in your own projects.
Let’s examine the following NFT contract:
0:3a4f57aded85be8f7d1651b8e9d7749662014e08f6bcd3afaf2175c83188a7da
From this contract, we can extract data such as attributes, descriptions, and other metadata:
https://nft.fragment.com/gift/hexpot-10348.json
By clicking the More button, you can retrieve all available information directly:
Here, you’ll find a URL with a key and filename:
https://nft.fragment.com/gift/hexpot-10348.lottie.json
Lottie Format Basics
The animation uses the Lottie format:
Lottie is a library developed by Airbnb that renders animations in JSON format, created using Adobe After Effects. It allows developers to easily integrate high-quality animations into mobile and web apps while maintaining smooth performance and scalability.
Web Implementation Example:
https://jsfiddle.net/w5dsp16v/
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<body>
<div id="animation-container"></div>
<script>
const animation = lottie.loadAnimation({
container: document.getElementById('animation-container'),
path: 'https://nft.fragment.com/gift/hexpot-10348.lottie.json'
});
</script>
</body>
Telegram-Specific Solution
Telegram uses the .tgs format for stickers:
.tgs
files are gzipped Lottie JSON files, playable via the rlottie library.
Implementation Workflow:
- Download Lottie JSON
- Compress with GZIP
- Send as Telegram document
Go Code Example:
package main
import (
"bytes"
"compress/gzip"
"github.com/aaapi-net/hog"
tele "gopkg.in/telebot.v3"
)
func getTgsAnimation(lottieUrl string) ([]byte, error) {
data, err := hog.Get(lottieUrl).AsBytes()
if err != nil {
return nil, err
}
gz, err := compress(data)
if err != nil {
return nil, err
}
return gz, nil
}
func compress(data []byte) ([]byte, error) {
var buf bytes.Buffer
writer := gzip.NewWriter(&buf)
_, err := writer.Write(data)
if err != nil {
return nil, err
}
if err := writer.Close(); err != nil {
return nil, err
}
return buf.Bytes(), nil
}
func sendLottieAnimation(c tele.Context, lottieUrl string) error {
tgsAnimation, err := getTgsAnimation(lottieUrl)
if err != nil {
panic(err)
}
file := tele.FromReader(bytes.NewReader(tgsAnimation))
photo := &tele.Document{
File: file,
MIME: "application/x-tgsticker",
FileName: "hexpot-10348.tgs",
DisableTypeDetection: true,
}
return c.Send(photo)
}
Key Takeaways
- Use native
.tgs
format for Telegram compatibility - Avoid MP4/GIF conversions to preserve quality
- Leverage Telegram's built-in Lottie support
Feel free to contact about TON Blockchain development @apitonDev.
Share your implementations below!
Top comments (0)