Blog Post

Discover
1 MIN READ

Storyline: Meet the Team Click-and-Reveal Template

NicoleLegault1's avatar
NicoleLegault1
Community Member
9 years ago

This elegant click-and-reveal makes use of fun entrance and exit animations to give it some pizzazz. You can swap out the images and text to transform this into a Meet-the-Team interaction for your own organization, or you can turn it into something else altogether by swapping the character images. 

View project in action.

Download Font  (Pacifico) to get the same look and feel. 

Published 9 years ago
Version 1.0
  • RichardParks's avatar
    RichardParks
    Community Member
    Hi there Nicole, Just wondering how you created the exit slide layer transition. Any tips would be fabulous
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Richard -- Thanks for your comment and your question!

      I did it by using a cue point to pause the timeline right before the exit animation would occur on the object. When the user hits the Close button to exit the layer, it resumes the cue point just in time for the exit animations to occur on the objects.

      Hope this helps.

      Here's an article I wrote about how to use cue points to trigger animations, and it has a video tutorial as well: https://community.articulate.com/series/41/articles/how-to-use-cue-points-to-trigger-animations
  • I love this and I am trying to hone my skills by creating this from scratch. In yours, you can click a button multiple times to see the reveal. In mine, I can only see the reveal once. How do I format the button for the user to click more than once to see the reveal?
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi Lorrine - Thanks for your question. The way I am able to reveal the layer more than once is like this:

      First of all, I added a trigger to each layer to "Hide layer when this layer ends". So when the timeline is over on the pop-up layer, it hides the layer.

      If that alone doesn't work, you might want to go into Layer Properties (by clicking the little gear widget icon next to the layer title) and adjust the "When revisiting" dropdown so it is "Resume to initial state" (instead of "Automatically decide" which is the default). Try this out and let me know if it works! Hope this helps!
  • KerryCampbell's avatar
    KerryCampbell
    Community Member
    hi there. this is a nice template. I'm having trouble with it, however. It doesn't seem to show the trigger for clicking on the prev/next button to move to the next slide. I'm expecting the behavior that the user would click on next to go to the next slide, but the prev/next buttons do not appear. Can you please tell me how to make sure this functionality works. Otherwise, how do they progress to the next slide? Thanks, Kerry
  • EmilyHackl's avatar
    EmilyHackl
    Community Member
    Hi Nicole!

    Thanks for sharing your excellent work! I'm trying to recreate this for an interaction I'm working on. Everything is working the same except for the Close button. Since the items on each layer are grouped, the whole layer is showing as a clickable option to close the layer. I tried comparing my project to yours and everything appears to be the same. Any suggestions?
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Hi there Emily! Is it possible the objects are in a group? If they are in a group, everything in the group will show as clickable.