Theo's Typesafe Cult•2y ago

Animating a Hero title

Playing with animations with vue/headlessui. Trying to create a Hero title that has a highlighted word that rotates and animates. So it would go from "I am a bilingual person" to "I am a bad person" (ignore the words, just for the sake of the demo :P) and keep rotating. Animating the word dropping in is easy enough. But what tools do I have at my disposal for the surrounding content "I am a" and "person" to shift with an animation when the inner element changes size?

11 Replies

exodus•2y ago

Damnit wrong flair here, this is not a deep question lol

Pod•2y ago

Lol I've never done this, but have you tried autoanimate?

exodus•2y ago

hmmm gonna try that!

Pod•2y ago

👍

exodus•2y ago

You are a beautiful person

Pod•2y ago

It worked? 👀

exodus•2y ago

yep! might need to tweak things a bit but works right out of the box

Pod•2y ago

Ayy nice, mind sending a vid?

exodus•2y ago

yeah I'll get the duration tweaked and get one up. What's a good video/gif recorder these days lol?

<h1
  v-auto-animate
  class="text-white text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl flex justify-center gap-4 flex-wrap"
>
  <span class="text-white">I am a </span>
  <transition
    mode="out-in"
    enter-active-class="transition ease-out duration-1000 "
    enter-from-class="opacity-0 transform -translate-y-4"
    enter-to-class="opacity-100"
    leave-active-class="transition ease-in duration-1000"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0 translate-y-4"
  >
    <span class="text-indigo-200" :key="highlight"> {{ highlight }} </span>
  </transition>
  <span class="text-white">person</span>
</h1>

<h1
  v-auto-animate
  class="text-white text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl flex justify-center gap-4 flex-wrap"
>
  <span class="text-white">I am a </span>
  <transition
    mode="out-in"
    enter-active-class="transition ease-out duration-1000 "
    enter-from-class="opacity-0 transform -translate-y-4"
    enter-to-class="opacity-100"
    leave-active-class="transition ease-in duration-1000"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0 translate-y-4"
  >
    <span class="text-indigo-200" :key="highlight"> {{ highlight }} </span>
  </transition>
  <span class="text-white">person</span>
</h1>

Pod•2y ago

I use sharex lol, you can also use gyazo but no worries, just wanted to see 😄

exodus•2y ago

yeah I want to share it with a friend anyways heh didn't notice it is clashing a bit with the transition I used should be able to tweak it a bit though Maybe I'll just ditch the vue transition here and just use autoanimate for this one. Good enough heh. Still wondering if there's a way to do this natively with vue/tailwind

Gaming

Programming

Animating a Hero title