Terkadang, sebuah situs web dapat meninggalkan kesan kuat walau tanpa elemen visual yang mencolok. Dalam kasus ini, animasi teks seringkali menjadi elemen kunci. Meskipun sering kali diremehkan, animasi teks dapat membuat situs web menjadi lebih dinamis dan menawan jika digunakan dengan tepat.

Di bawah ini adalah 8 contoh animasi teks canggih yang dapat ditemukan di situs web yang dibuat dengan FramerFramer. Manfaatkan setiap contoh untuk menambahkan kehidupan pada teks dan dapatkan inspirasi saat mengembangkan proyek Anda.

1. Teks melayang ketika dihover

Contoh_A.E. Studio

Homepage A.E. Studio menawarkan interaksi unik di area hero dengan teks yang melayang dan tersusun ulang saat mouse dihover. Efek ini selaras sempurna dengan suasana yang disampaikan melalui ungkapan “Bagaimana jika teks malang ini bermimpi tentang kebebasan dari halaman dan layar…”.

Animasi interaktif ini menawarkan daya tarik lebih dari sekadar efek visual sederhana. Pengguna merasa seolah-olah terlibat langsung di header, mencerminkan arah berani studio tersebut, dan menekankan tema mematahkan batasan desain identitas merek dan visual.

Kunjungi situs web

2. Perubahan gaya font yang dinamis

Contoh_CO-UX

Di header situs web CO-UX, nama merek 'CO-UX' diubah dengan animasi yang memanfaatkan berbagai gaya font. Perubahan font yang terus menerus menarik perhatian pengunjung dengan cepat, menciptakan atmosfer kreativitas di seluruh situs. Animasi ini juga mencerminkan sifat kolaboratif dari proyek CO-UX, yang berlangsung dengan cara tim desain berbagi ide dan hasil.

Kunjungi situs web

3. Perubahan warna berbasis scroll

Contoh_Uroki Tattoo Studio

Sebelah header situs web Uroki Tattoo Studio menyajikan tulisan tebal “NAJBARDZIEJ UROKLIWE STUDIO W WARSZAWIE” (studio paling menarik di Warszawa). Fitur utama dari bagian ini adalah animasi perubahan warna saat di-scroll. Saat gambar di-scroll, teks tetap tetapi warnanya berubah.

Efek dinamis ini menguatkan identitas studio, memberi kesan bahwa teks hidup dan merespon gerakan pengguna. Elemen ini digunakan dengan cara yang memikat untuk mencerminkan energi kreatif studio, memberikan pengalaman browsing yang mengesankan.

Kunjungi situs web

4. Teks muncul melalui transformasi bentuk

Contoh_Ebb Scandinavia

Situs web Ebb Scandinavia dimulai dengan animasi teks menarik di bagian header yang sepenuhnya mencerminkan nilai inti studio 'perubahan'. Di belakang teks header, lanskap bergerak yang dinamis berkembang, awalnya menampilkan bentuk-bentuk abstrak yang berubah. Namun, ikon hover dan pojok menunjukkan

Efek fade in + tebal saat menggulir

Contoh_Lovi™

Situs web Lovi™ menggunakan animasi unik yang membuat teks menjadi semakin jelas dan berubah menjadi huruf tebal saat digulir, sehingga informasi utama aplikasi perawatan kulit menjadi lebih menonjol.

Animasi ini tidak hanya terlihat menarik, tetapi juga memiliki efek yang lebih dari sekadar estetika. Animasi ini mendorong pengunjung untuk membaca informasi dan memahami isinya secara intuitif. Ketika digunakan bersama font besar dan tebal, animasi ini membantu pengguna memahami fitur yang ditawarkan aplikasi dengan cepat. Ini adalah cara sederhana namun efektif untuk menyajikan konten yang jelas dan menarik.

Kunjungi situs web

6. Efek geser di area Hero

Contoh_Adam Kozel

Situs portofolio desainer Adam Kozel menarik perhatian saat masuk ke halaman utama, di mana teks “multidisciplinary designer” meluncur dengan lembut ke kanan. Hal ini mencerminkan kemampuan 3D rendering, motion design, dan front-end-nya, sekaligus mengekspresikan pendekatan desain modernnya. Kombinasi font tebal dan gerakan halus yang digunakan di sini dapat menciptakan pengalaman yang bersih dan visual menarik. 

Kunjungi situs web

7. Animasi Loop

Contoh_PAGE BREAK

Situs web PAGE BREAK menampilkan animasi di mana teks ‘Model Home’ berulang kali muncul, bergerak, bergoyang, dan menghilang, menciptakan efek loop. Animasi ini menambahkan energi yang dinamis dan ritmis pada bagian tersebut, menarik perhatian terhadap buku, dan semakin menonjolkan suasana kreatif dan inovatif perpustakaan ini. Gerakan yang terus-menerus ini memecah aliran teks statis, memberikan pengalaman membaca yang lebih menarik dan berkesan bagi pengunjung.

Kunjungi situs web

8. Efek flip berbasis scroll

Contoh_Goldencode

Situs web Goldencode menggunakan efek flip teks untuk menonjolkan pesan berkonsep streetwear. Setiap kali pengguna menggulir, kalimat “When your style is slick, the vibes are just sick” muncul dengan efek flip yang halus.

Animasi ini memperkuat identitas merek sekaligus menambahkan elemen interaktif pada pengalaman pengguna. Tipografi tebal dan gerakan halus menyampaikan pesan secara efektif tanpa mengganggu desain yang bersih.

Kunjungi situs web

5 Cara Mengimplementasikan Animasi Teks di Framer

Menambahkan gerakan pada teks di situs web dapat meningkatkan pengalaman pengguna dan meningkatkan keterlibatan dengan konten. Dengan fitur efek teks baru di Framer, Anda dapat dengan mudah menerapkan animasi pada teks. Berikut adalah lima cara untuk menggunakannya.

1. Menonjolkan informasi penting dengan pemicu Appear: Dengan menggunakan pemicu Appear dari Framer, teks penting akan ditampilkan secara mencolok saat pengguna menggulir. Anda dapat menerapkan efek seperti penyesuaian ukuran atau efek kabur untuk menciptakan transisi halus yang menonjolkan judul atau ajakan bertindak, sehingga menarik perhatian ke bagian yang paling penting.

2. Meningkatkan interaksi dengan animasi hover: Dengan Framer, Anda dapat menambahkan animasi teks hover yang halus, seperti teks yang bergerak atau berubah ukuran saat pengguna mengarahkan kursor mouse. Hal ini memungkinkan Anda menambahkan lapisan interaktif ke situs dan mendorong pengguna untuk lebih terlibat dengan konten.

3. Membuat urutan animasi secara berurutan: Dengan Framer, Anda dapat mendesain urutan animasi teks menggunakan pemicu seperti Appear atau Section in View. Dengan menambahkan waktu penundaan dan menganimasikan garis atau kata secara terpisah, Anda dapat menyampaikan cerita melalui teks yang mengalir secara alami saat pengguna menggulir.

4. Mengintegrasikan efek teks ke dalam animasi latar belakang: Efek teks Framer juga dapat digunakan bersama animasi latar belakang. Dengan menggabungkan kedua efek ini, Anda dapat menciptakan efek transformasi teks atau perubahan warna saat pengguna menggulir melalui beberapa bagian, sehingga menambah kedalaman dan kreativitas pada desain.

5. Optimalkan animasi berbasis gulir untuk lingkungan mobile: Gunakan pemicu Layer in View dari Framer untuk memastikan animasi teks di perangkat mobile dapat diimplementasikan secara responsif. Efek berbasis gulir ini menerapkan animasi saat teks muncul di layar, sehingga dapat memberikan pengalaman yang menarik bagi pengguna mobile tanpa mengorbankan kinerja.

Meningkatkan situs web dengan animasi teks bergerak

Menambahkan animasi teks ke situs web sama seperti memberikan kepribadian. Alih-alih konten statis, gerakan dapat menarik pengunjung, menonjolkan poin utama, dan memberikan pengalaman menarik yang membuat orang terfokus pada pesan.

Dari efek hover sederhana hingga urutan animasi yang dipicu oleh scroll yang lebih kompleks, tambahkan kehidupan ke situs Anda dengan berbagai jenis animasi.

Lihat bagaimana animasi teks dapat mengubah situs Anda di galeri ini untuk mendapatkan ide baru. Coba beberapa templat situs web animasi dan daftar di Framer untuk membuat situs web yang memikat pengunjung dari berbagai sudut.

Artikel ini adalah adaptasi dari konten blog resmi Framer '8 teknik animasi teks canggih untuk desainer profesional'.