New Portfolio - Transitions

In my old portfolio, I tried to hack page transitions by applying CSS animations on page load. It worked ok, but there was still a hard cut—static elements like the header still got replaced, and often the animation would stutter because it took place at the same time the DOM was trying to load all the assets of the new page.

This time around, I implemented the superb swup.js, a full-fledged transition library that allows you to swap out containers large and small. You can trigger different animations depending on the link clicked, as shown in the shot.

Even better, swup preloads pages so that by the time a link is clicked, everything is ready to go. Working with it has been great and I'd definitely recommend checking it out.

(This isn't a promoted post, the library is just that good.)

See these transitions and more on my new portfolio: kyledecker.me