Rollover animation


Have a look at the Navigation buttons on this site

How do I achieve this rollover behavior in Sparkle? The animated underline also marks which page you’re on, which is quite clever.

I know we can flip colors or text style on hover, but this seems different. Can we do rollover animation in Sparkle?

@vfxwolf, That exact action we can’t as yet do in Sparkle…

What you can do though is (for example) when clicking on a main navigation link like “About Us”, that the About Us page’s main navigation link is underscored with a box 3px in height imitating the active underline state in your website example.

Thanks, I was thinking that… but it wouldn’t have the growing animation, would it. It would just pop on and pop off… correct?

Yes that is correct.

The only way to create the main navigation underscore animation in Sparkle is if you know a bit of CSS, in particular transition and transform CSS.

But you could use one of the Sparkle built in transition?

Built-in transition?? Tell me more :wink:

Sparkle’s one time animation…
When selecting your 3px high box underscoring the main navigation “About Us”, you can select a pertinent animation (like fade-in on page load with say a 0.5second delay) to grab the Users’ attention that they are on the “About Us” page.

Ahh… thought you were suggesting a way to trigger that with a mouse over ;). but yeah, that’s another nice idea