Skip to content

Instantly share code, notes, and snippets.

@joserick
Last active September 20, 2024 13:50
Show Gist options
  • Save joserick/6f16a946fc3a715d0f00dd0aa395e002 to your computer and use it in GitHub Desktop.
Save joserick/6f16a946fc3a715d0f00dd0aa395e002 to your computer and use it in GitHub Desktop.
Tailwind Css Marquee | Text-Overflow (Truncate) with Transition

Marquee.gif

Demo <-- Try Tailwind Marquee (Text-Overflow "Truncate" with Transition)

<!-- Effect Marquee -->
<div class="w-72 truncate">
    <div class="inline-block w-full hover:w-auto active:w-auto">
        <div class="relative left-0 truncate text-3xl hover:left-[calc(18rem-100%)] hover:transition-[left] hover:duration-[4000ms] hover:ease-linear">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment