In this project, we'll be creating interactions
which animate to show and hide the lyrics
to a song.
What's the song?
It's not important.
Let's move on.
Everything starts here.
This is our trigger.
This div block.
And by the way, you can create interaction
triggers using almost anything out there — some
examples might include a paragraph, a button,
a section, Idris Elba, a whole page, a heading...
Let's start by configuring our trigger.
(We’ll do this from the beginning so we
can set everything up from scratch.)
We'll select this div block, and go over to
interactions.
Now we want the element to be the trigger,
so let's click in and specify.
(We want the mouse click to serve this function.)
And we’re going to create two animations
for this one: Show...and Hide.
This one we’ll name Show.
So let’s select this div bock — which
contains all our lyrics.
Notice for a second that the timeline is still
visible to the right.
(Even though we’ve now selected a separate
element — a different element than the trigger
— we’re still affecting what happens when
we click the trigger.)
Let’s set our initial state.
And since we want this entire div block and
its children to not show up when we first
load the page, we’ll set our initial state
to display: none.
That’s going to be our initial state.
So all we have to do to show it?
We’ll add one more action.
We can add this right in the timeline.
Same idea here, but we’ll make our display
setting whatever the original value was.
Maybe it was block or flex — in this case
it’s block.
And that’s it for Show.
Let’s do hide.
And we’ll go back out to the trigger, and
on the second click, we want to do a different
timed animation.
This time, we’ll create one called Hide.
We don’t need an initial state here.
In fact, all we need is a single action.
We’ll go in, and we’ll make sure to switch
back to display: none.
If we go to Preview?
We can now press Show Lyrics repeatedly to
show and hide the lyrics.
Now what about that text?
Well, it’s the same kind of principle here.
We can have a second element — additional
text — maybe this can say Hide Lyrics.
And its initial state — when we’re using
our trigger, back on the first click — we
can do the same thing.
We can create an action which initially hides
the text element we have selected.
(Let’s make sure to set this as the initial
state.)
And we’ll click in the timeline to add its
second action (where it goes from the initial
state).
And we’ll make that visible.
This’ll work fine as-is, but we also want
to hide the other text.
We don’t have to set an initial state on
this one since it’s already visible.
But we do want to hide it on click.
We want to make sure its display setting is
set to none.
And for our second click?
We’ll want to go back to the trigger — this
way we can configure what happens in our Hide
animation.
When we click hide, we actually want the text
that says Hide Lyrics to disappear.
So, we’ll make sure that action sets our
display setting to none.
And since our first click hid the text that
says Show Lyrics, we’ll want to make sure
clicking this a second time actually brings
Show Lyrics back so its visible again.
(At this point, let’s click and drag to
make sure this is all occurring at the same
time: the 0-second mark.)
If we preview?
We have exactly what we were looking for.
Clicking the trigger shows and hides the lyrics
— our div block containing those lyrics.
And the text in our trigger swaps out as well.
Now this is the basic functionality.
We can, of course, animate on top of this.
For instance, what if, when we click this
trigger, we want the div block to fade in?
To go from 0% opacity to 100% opacity?
Well, we can select our div block, which (of
course) has its initial state set to display:
none.
And we can add another action which sets its
opacity to 0%.
(All the way down to 0.)
Make sure this is the initial state.
Create a new keyframe — another action here
to control opacity.
And this time, we can set it to anything,
but we’ll make sure it’s all the way up
to 100.
Hit play?
It fades right in.
Let’s go back to the trigger — the mouse
click (or tap) controls for our trigger.
And on our second click, we can go into our
Hide animation and configure our div block
to fade out.
Make sure the div block containing the lyrics
is selected, and we’ll create an action
which drops the opacity of our div block all
the way down to 0.
In our timeline, we’ll want to make sure
this happens before we set our display setting
to none.
Once we’re there, let’s hit Preview.
And we’re now fading in and fading out on
click.
Now wait a second.
If we’re controlling opacity, do we really
need to change our display setting?
It depends on what you’re trying to achieve.
In this case, it’s not affecting our design.
Remember that display: none won’t just make
the element disappear; it’ll yank it from
the normal document flow.
(Opacity makes something translucent or transparent,
but display: none pulls the element and its
children completely out of the document, so
depending on your design, keep that in mind.)
Here we’ve tweaked our animation and added
a move transform to the actual paragraph using
the same principles we covered with opacity.
And we tweaked our easing to smooth everything
out.
You can dig into this example project and
take a look, play around with it, change it
up to get really familiar — total awareness
— with this kind of interaction.
But that’s...how to show and hide (and even
fully animate) ...on click.
