How to add custom JS transitions in a Svelte app
Svelte transitions
Svelte has a transition module, which allows us to apply a visual transition to the DOM elements. We can use this directive to perform any of these transitions in Svelte:
fadeblurflyslidescaledrawcrossfade
The code below uses one of these transitions, fade, to fade in some text. Click the “Run" button to see it in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
In this code, we utilize a Svelte transition by doing the following:
Line 2: We import the
fadetransition.Line 17: We use
fadetransition to fade inHello Educativetext when the “Show text” button is clicked.
These transitions are pretty useful; however, they are limited. If we want to use a different kind of transition, we cannot utilize the transition module. Now let’s suppose that in the above application, we want the text font to increase as it fades in. We’ll not be able to do it using the built-in module. We’ll need a different tool to perform these two transitions simultaneously. This is where the custom JS transitions come in. Using these, we can create any kind of transition we want and utilize it in our Svelte app.
Custom JS transitions
For a custom JS transition, we create a JavaScript function that manipulates the DOM elements according to our needs. This function can have two arguments, node referring to the DOM element we want to manipulate and duration specifying the duration of the transition.
This JS transition function should return a CSS object, which Svelte then uses to style the element. The output can have two arguments, t and u. The t argument represents the progress of the transition. Its value goes from 0 to 1 for in transitions and from 1 to 0 for out transitions. By using the t argument, we can control the intermediate states of the transition and apply various CSS transformations. For example, we can adjust the opacity, position, scale, or any other CSS property based on the t value to achieve the desired transition effect. The u argument is simply the inverse of the t argument, and it can also be utilized similarly.
Let’s modify our code to get the desired transition effect using a custom JS transition. The code for the JS function is given below:
function fadeIn(node, { duration = 500 }) {return {duration,css: (t) => `opacity: ${t};font-size: ${50 + t * 50}%;`};}
In our original code, replace the import statement in line 2 with this function, as we’ll utilize the custom JS transition instead of the transition module to get the desired transition.
Now, call this function by replacing <p in:fade={{ duration: 500 }}> in line 25 with the code given below:
<p class="text" in:fadeIn>
Notice how we are using fadeIn, the function’s name, instead of fade module.
After making these changes, click the “Run” button to see the custom JS transition in action.
Free Resources
