Create a Fade Transition with Svelte

Andrew Smith
InstructorAndrew Smith
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

We will learn how to use the fade transition in svelte to create a simple transition. We will also look at the additional parameters you can pass to this transition to create a staggering effect.

Instructor: [0:00] Let's import the fade transition from the svelte/transition module. Now, we'll create a variable to hold the state that our transition will rely on. Inside our HTML, we will create the span element with a transition directive attached along with the fade transition we imported.

[0:18] This by itself won't have an effect on the HTML element until we wrap it into an if block. Let's wrap our span HTML element with an if block, which checks the state of our toggle variable we've created earlier.

[0:32] In order to change a state, we will attach a click event on the parent DIV. Inside of this event callback, we will change the toggle state. Now, when we click on the Egghead text, we will see it fade out, and if we click again, it will fade in.

[0:47] Let's take a look at another example where we will split the text letter by letter and transition in each letter with a bit of a delay. We have replaced our Egghead text with a placeholder variable from the each block.

[1:00] We can now add a delay to our fade transition directive as a value. You will notice that when we click, each letter is still fading as if it was still one word even with the delay property attached. This is because we need to offset the delay per letter in order for them to have different delays. We can do so by using the index variable created by the each block.

egghead
egghead
~ 25 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today