One way to do it would be to set a trigger for the layer to pause the timeline at a certain point, like 0.5 seconds (time depending on whether you have any entrance animations on the layer). You'd want to make it as short as possible, to prevent the user from clicking the "X" before the timeline is paused, or simply have the "X" not appear until just before the pause.
Then create two additional triggers: Resume the timeline when the user clicks the "X," and Hide the layer when the layer's timeline ends. Make the timeline short enough that it ends as soon as your exit animation is completed.
I've attached a quick and dirty example. Rather than the markers, I used icons, and used a spin as an exit animation, also using the triggers I mentioned above.
The issue seems to be that the icon within the group on each layer was not set to show until the end of the timeline (even though its timeline was the same length as the rest of the objects. I see it spinning now as the objects all shrink.
I think it's because the timeline on the layers was pretty short. I extended it by a tad over 0.5 seconds, made the timeline pause at 0.55 seconds. Now you should see the spin before the group shrinks. What was happening was that the spin was starting at the same moment as the shrinking group. Now it's more obvious.
Turns out that to make the object animate on hover, you need to make a copy of the object within the state after creating the hover state (or at least that's the only way I could make it happen), and then add the enter animation to that copy within the hover state. Phil, it looks like that's how you did it as well.
Jeni, I replaced your icons with images that are not transparent in the middle, as the base icon shone through under the animation. But they do have the hover animation working. Also, had to ungroup the icons from the main group, as otherwise, the hover animation was triggered by hovering anywhere over the group. Lastly, I had to shorten the length of the icons on the timeline, because otherwise the hover state was triggered again after clicking them because the mouse was still there.
It took me a while to find it the other day. It's in the master, on the layer called Animated. You have to not only edit the states of the icons, but actually click on the object within the hover state to see the animation.
Look at what I sent the other day, because it's done there as well, but in the slides.
Hi Marc, this seems an older thread (and I happened to land here too), though as you don't seem to have a response, I thought I'd give it a try...
Check out the Slide Master of Phil's file (you can find this under 'View'). There is a layer (called Activated) which you activate when you click on 'Menu'. Within the 'Activated' layer on the Slide Master, the three little white circles (those that turn red and rotate upon hovering) with the rectangles in them (which actually seem to be a character rather than a shape) have two states; normal and hover. The hover state has the Spin entrance animation on the shape.
Happy to hear Mick's sleuthing skills helped you, Mary! Hopefully he's still subscribed to this thread, but you can reach out to him directly from the contact page if needed.
23 Replies
One way to do it would be to set a trigger for the layer to pause the timeline at a certain point, like 0.5 seconds (time depending on whether you have any entrance animations on the layer). You'd want to make it as short as possible, to prevent the user from clicking the "X" before the timeline is paused, or simply have the "X" not appear until just before the pause.
Then create two additional triggers: Resume the timeline when the user clicks the "X," and Hide the layer when the layer's timeline ends. Make the timeline short enough that it ends as soon as your exit animation is completed.
How to I make the "X" spin when it is clicked?
As David says, you just don't need the trigger to hide the layer set it in the layer properties, here is an example.
https://www.dropbox.com/s/lctlapho1xiozox/Circular%20Menu.story?dl=0
I've attached a quick and dirty example. Rather than the markers, I used icons, and used a spin as an exit animation, also using the triggers I mentioned above.
Phil, that is impressive. Took me a bit to see that you had added a spin to your hover states in the master. Love it!
Thanks David, that is an old one. I still like it.
Sent from my iPhone
I must be doing something wrong, because I don't see the spin happen before the layer is hidden. Here is the file.
Wish I could see your file, but Dropbox is blocked by my organization! :(
I have hopefully uploaded it now
The issue seems to be that the icon within the group on each layer was not set to show until the end of the timeline (even though its timeline was the same length as the rest of the objects. I see it spinning now as the objects all shrink.
This is so strange, I'm still not seeing it on my end. I downloaded the file you attached.
I can see your file now, but I'm unsure how you made the spinning objects. I don't see them on your timeline, states, or any additional layers.
I think it's because the timeline on the layers was pretty short. I extended it by a tad over 0.5 seconds, made the timeline pause at 0.55 seconds. Now you should see the spin before the group shrinks. What was happening was that the spin was starting at the same moment as the shrinking group. Now it's more obvious.
Thanks, now I see it.
I do wish there was a way to do animations upon hover. For example, the X would spin upon hover, but then the layer would close upon click.
Maybe in future versions of SL animation will be independent of a timeline.
In my file the icons spin on hover
Turns out that to make the object animate on hover, you need to make a copy of the object within the state after creating the hover state (or at least that's the only way I could make it happen), and then add the enter animation to that copy within the hover state. Phil, it looks like that's how you did it as well.
Jeni, I replaced your icons with images that are not transparent in the middle, as the base icon shone through under the animation. But they do have the hover animation working. Also, had to ungroup the icons from the main group, as otherwise, the hover animation was triggered by hovering anywhere over the group. Lastly, I had to shorten the length of the icons on the timeline, because otherwise the hover state was triggered again after clicking them because the mouse was still there.
I'm not sure what I'm doing wrong, but I don't see anything on your slides.
The master doesn't show anything either.
Jeni,
It took me a while to find it the other day. It's in the master, on the layer called Animated. You have to not only edit the states of the icons, but actually click on the object within the hover state to see the animation.
Look at what I sent the other day, because it's done there as well, but in the slides.
Hi Phil, how did you do this kind of animation? I would like to understand.
The one that you send in the dropbox.
Hi Marc, this seems an older thread (and I happened to land here too), though as you don't seem to have a response, I thought I'd give it a try...
Check out the Slide Master of Phil's file (you can find this under 'View'). There is a layer (called Activated) which you activate when you click on 'Menu'. Within the 'Activated' layer on the Slide Master, the three little white circles (those that turn red and rotate upon hovering) with the rectangles in them (which actually seem to be a character rather than a shape) have two states; normal and hover. The hover state has the Spin entrance animation on the shape.
Hope his helps!
Mick, nice detective work. Never would have found that. My question is: Why put this in the Master?
Happy to hear Mick's sleuthing skills helped you, Mary! Hopefully he's still subscribed to this thread, but you can reach out to him directly from the contact page if needed.