Get ready, we just made fading in and out a whole lot easier. Whether it’s for when your page starts, when you mouse over, or even click or tap, you can fade your objects in and out.

Trying it Out!

First set up your page. Add some images and text!

fade in layout

Here I picked a grumpy tree character, a speech bubble shape, and a text box.

Let's first to add a fade in effect when the page starts! When the page loads, I want the tree to fade in from the left. To do this, first switch the "Event Graph" and then add the following blocks.

fade in left to right

You need an event block (On page start), your function (Fade), and the object you wish to fade (Image0 aka the grump tree)

Now I want to fade in the text and the speech bubble together after the character fades in. To do this we will "cascade" the functions. This means that the "condition port" on the second Fade function should be connected to the output port of the first Fade function.  

The code tells the book to first wait for the tree to fade in before starting the next Fade function. 

Fade in cascade

Cascading the Fade function. Waiting for one function to finish before another begins

Why Fade is Cool

You can use the fade function on any element (images, objects, animations, text, etc). You have control over fading your object in or out and the direction. By default the Fade block will fade in the same place. However, you can set the direct to fade in from the bottom, top, left, or right. 

There is no need to set the initial state of the object. For example, you do not need to first hide the element before fading it in. We don’t see a point in that (because obviously the initial start of an object fading in should be hidden...). 

Furthermore, you cannot trigger events on hidden objects. No awkward click events on objects that are hidden. :) 

Like all functions, fade works for all events and after any function that has an output port. 

Recap: The Fade Function

1) Fades an object in or out
2) Takes care of hiding an object until it fades in
3) Removes all events while the object is hidden

Pro Tips

This feature can give add a subtle but fresh feel to your story. If you have text, fade them in to create movement and engagement for your readers’ eyes.

You can also easily fade in hidden objects when you click on hot spot to create I Spy type of stories.

Always preview: Don’t get so excited you forget to check with the preview. Sometimes if you have multiple cascading functions, it’s easy to forget one fade in or fade out. Always be sure to preview your work before publishing. Previewing also saves your work ;)