Transitions for States

What This Is

This shows a transition for object states. It uses GSAP to fade an object's opacity to zero, causing a gentle fade between an object with a visible state and a non-displaying state.  

What You Need

You'll need to create an object with at least one visible state and one blank state. You should be ok minimally modifying Javascript.  

Why I Made It

I was creating a gamified course with a health status bar (four stacked rectangles). On the how-to-play section, I wanted to show the health bar in action. I didn't want the transition between full health and three bars of health to be sudden and jarring.

How-to

Each of the four stacked rectangles had four states. The topmost health bar (Health4) has one visible state, and three non-displaying ones. When the character loses health, the top bar vanishes first. 

The general idea is this: 

• Set the object to a visible state
• Run the Javascript on that object
• Set the object to a non-displaying state 

 

Health4 starts off as visible (state 4). 

Trigger 1: Execute Javascript 
     when the timeline reaches time 0m 4sec

This starts the fade before the object no longer displays.

Trigger 2: Set state of Health4 to 3 
     when the timeline reaches time 0m 6sec

In this state, the object is no longer visible.

 

Javascript is:

const parent4 = document.querySelector('[data-model-id="5cVNczIuMUl"]');
gsap.to(parent4, {duration:2, opacity:0});

 

Adjust the timing as needed, but it's a good idea to make sure that two triggers are at least as far apart as the duration for the fade in the Javascript.