slide in on click

Clearly I'm doing this wrong. haha

I want the grouped content to slide left and right, depending on what you click on.  I have it working... but clearly I shouldn't have to set all the elements on the stage to be "disabled" when the timeline starts, which is how I managed to get it working.  If I don't individually disable each element (the top rectangle, the shaded rectangle, the words on top of the shaded rectangle) then they end up acting as hot spots and trigger a rollover effect.

I'm new at this but I KNOW this isn't right. LOL

Can someone tell me the proper way to achieve what I have done in this file?  I also tried slide layers but couldn't wrap my brain around it.



4 Replies
Alyssa Gomez

Hey Karen, thanks for including your file! Since the slide objects have a "Hover" state, the objects will change to that state when the mouse hovers over them. Changing the state of the objects to disabled when the timeline starts is one way to prevent the hover, but you can also add a transparent rectangle over the objects.

Click here to check out the changes I made in your file. You'll notice I added a transparent rectangle over the "Then" image, and I also added this trigger to hide the rectangle once the "Now" image is clicked:

I hope that alternative will work for what you're trying to achieve!

Karen Siugzda

I added a rectangle to the NOW side to mimic what you did on the THEN side. I made it hidden when the timeline starts then make it visible once the user clicks that right side image. But I can't figure out why the tan rollover effect still appears if you hover over the NOW header and the block of text on the NOW slide. The hover state is turned off for that main image, which is correct.... but I'm back to my original confusion of why those upper and lower elements are triggering the tan rollover effect of the main image...

Alyssa Gomez

Ah, I see the issue now. I didn't notice when I updated your file that hovering over the NOW header and block of text triggered the hover state, so the transparent rectangle I added doesn't really help here. 

We've got some creative folks in this community, so hopefully they can chime in with other ideas! I'm looking forward to seeing what they can come up with. 😊