TTC
Theo's Typesafe Cult•3y ago
exodus

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
exodusOP•3y ago
Damnit wrong flair here, this is not a deep question lol
Pod
Pod•3y ago
Lol I've never done this, but have you tried autoanimate?
exodus
exodusOP•3y ago
hmmm gonna try that!
Pod
Pod•3y ago
👍
exodus
exodusOP•3y ago
You are a beautiful person
Pod
Pod•3y ago
It worked? 👀
exodus
exodusOP•3y ago
yep! might need to tweak things a bit but works right out of the box
Pod
Pod•3y ago
Ayy nice, mind sending a vid?
exodus
exodusOP•3y 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
Pod•3y ago
I use sharex lol, you can also use gyazo but no worries, just wanted to see 😄
exodus
exodusOP•3y 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

Did you find this page helpful?