Hover expand and then show layer with click

Nov 04, 2019

Hello! I have been endlessly trying to figure out how to do this and have not been successful yet. 

I am trying to recreate the hotel expand and contract information when hovering and then if you click on that topic it takes you to a new layer. It's 42 seconds into this video: https://www.youtube.com/watch?v=dlnp_EJd8aQ&t=37s 

Does anyone know how to create the triggers for this? Thank you!

8 Replies
Jeff Forrer

Hello.  I looked at your file, a few suggestions to get you going in the right direction.  There are many ways to do this and no right or wrong way, as long as you can get the ultimate effect you want.  Here are some suggestions:

  1. When putting text on objects, feel free to put the text in the object vs. as a separate text item and then grouped, this will help keep objects cleaner and easier to manage.
  2. Use the power of button states when you can.  For example for the four green bars, you could have the rollover images as part as a Hover state on your rectangles (that you could now have the text on and not as a separate object).  This way when they roll over the green bars, the Hover or rollover state will automatically show up vs. showing a separate layer.
  3. Use motion paths when possible to give a smooth effect.  When animating objects on and off the screen, you can use the built in animations, or you can use Motion Paths.  

I used the suggestions above in the attached file to align close to the effects in the video you shared.  If you have questions on it let me know and good luck.

Heather Johnson

Thanks for looking at it!!

Honestly I can't figure out two things with these suggestions: 

1. Hover state - I can't seem to put a picture or copy and paste anything onto it? I can of course change the color and text but adding a 'layer' as the hover state doesn't seem to work? 

2. When putting text on the rectangle it's always centered and I can't move the text where I want it to be. Maybe I'm just silly and haven't figured out how to do it yet but that's why I did a text box. 

 

Also, I can do motion paths etc. and got the boxes to do something similar to the video but I can't figure out how to do the click and then boxes accordion out of the frame. Any tips for that?

Jeff Forrer

I will try again here but shorter response ;0), look at the file attached above for reference.

1. Hover state - Put the picture in a state on the rectangle.   Ungroup that from the text, put the text on the rectangle, edit the state, add a hover state to it, put the image there. (as in the file I posted).

2. For the text on the rectangle, if you right-click it and select Format Shape, then adjust the Text Box properties, that will allow you to change how that text shows up.

3. Motion paths, look at the example I posted, I added triggers to have those work like the accordion.

This discussion is closed. You can start a new discussion or contact Articulate Support.