Exploring Custom Transitions

In this chapter, we will delve into the world of custom transitions in Svelte. So far, we have explored Svelte’s built-in transitions and how they can be used to create engaging and dynamic user interfaces. However, there may be situations where the built-in transitions don’t quite meet your requirements and you want to create something more unique. This is where custom transitions come into play.

Custom transitions allow you to take full control over the animations and effects that you want to achieve in your Svelte application. This chapter will guide you through the process of creating your own custom transitions, whether they are CSS- or JavaScript-based. We will explore the transition contract, which serves as the foundation for creating custom transitions, and provide practical examples to help you get started.

By the end of this chapter, you will have a solid understanding of how to create custom transitions in Svelte, and you...

Technical requirements

This chapter will be somewhat code-heavy, but don’t worry—you can find all the code samples used in this chapter on GitHub at https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter14.

The transition contract

Before we dive into creating custom transitions, it’s essential to understand the foundation upon which they are built: the transition contract.

If you’ve read Chapter 9, you’ll be familiar with the concept of a store contract. Just as a store is an object that adheres to a specific store contract, a transition is a function that follows a transition contract. By understanding and adhering to these contracts, you can create custom transitions that integrate seamlessly with Svelte’s built-in transition system.

The transition contract consists of a single function that is responsible for the transition. This function accepts two arguments:

• node: The target DOM element that the transition will be applied to
• params: An object containing configuration options

The function should return an object that describes how the transition should be executed. We will delve into the details of this returned object later in...

Writing a custom CSS transition using the css function

The first custom transition we will be attempting to write together is an effect often witnessed in presentations, commonly referred to as the “color swipe.” This effect stands out due to its dynamic sweep of color that flows across the screen, creating a sense of energy that captivates the viewer’s attention.

The color swipe transition, as its name suggests, involves a sweeping change in color that takes place over an object.

Picture this: you’re looking at a static screen, possibly a section of a website. Suddenly, a new color begins to surface from one edge of the screen. Like a wave, this color spreads across the screen, enveloping it. As soon as the color completely covers the screen, it starts to recede from the edge of origin, revealing new content. When the color entirely withdraws, the new content is fully unveiled:

igure 14.3: The color swipe transition

The swipe can move in from...

Writing a custom JavaScript transition using the tick function

The custom transition we will attempt to write in this section is a flipboard transition. The transition emulates the mechanics of vintage airport departure boards. During this transition, each letter of the text flips, cycling through characters until it finally lands on the correct one. The transition ends when all the letters have settled into the right character.

The following diagram illustrates how the flipboard transition works to reveal the phrase Hello Svelte, with the vertical axis representing the flow of time from top to bottom:

igure 14.8: Flipboard transition visualized

At the onset of the transition, letters begin to appear from left to right, starting as a dash (-) and then flipping through random characters before settling on the correct one. This flipping motion continues from left to right until all letters have aligned with their corresponding characters, unveiling the intended phrase.

The...

Summary

In this chapter, we have explored how to create custom transitions in Svelte. We went through two detailed examples that utilize the css function and the tick function.

Hopefully, you now feel well equipped to write your own custom transition in Svelte, enabling you to craft a more engaging and unique user experience in Svelte.

In our next and final chapter, we will delve into how transitions can impact the accessibility of your Svelte application, guiding you in the creation of an engaging and inclusive experience for all users.