back
Sep 19, 2024

Tailwind transition fade-in-up

I want to create a demo for a Tailwind button that shows up with transition. It's a scroll-to-bottom button that will show up when the page is not at the bottom. 

Demo in Codesandbox: pyygw9.csb.app

The trick is 3 parts:

1. Add `transition` class to the button.
2. Add `opacity-0 translate-y-1` when the page moves to the bottom. This will produce a fade-out-down transition.
3. Add `opacity-100` when the page moves up. This will produce a fade-in-up transition because it alternates from opacity-0 to opacity-100 and translate-y-1 to translate-none (original position).

<button
  onClick={() => ref.scrollIntoView({ behavior: &quot;smooth&quot; })}
  className={cn(
    &quot;absolute bottom-[90px] right-8 transition&quot;,
    isBottom ? &quot;opacity-0 translate-y-1&quot; : &quot;opacity-100&quot;
  )}
>
  <CircleArrowDown className=&quot;h-8 w-8 text-gray-700&quot; />
</button>

Looks like it's not so hard after all!

Subscribe