Animate font size and color

Hi,

Is there any way I can animate the font size and color of the text on a click event?

Click on a rectangle with text (font size: 10, and font color: red), the rectangle should be expanded to a full screen, and the text inside should change to (font size: 30, font color: green).

I have tried changing the font size using rich text but it changes suddenly without smooth animation. I am thinking more like Auto-animate in Adobe XD

fontsize_color.rp (49.5 KB)

The “native” way to fake this would be to set dynamic panels and then use a fade between the panel states. But it won’t really accomplish what you’re looking for.

If the animation is a must… There are hacks :slight_smile:

You can use javascript to fill in the gaps. Axure uses jquery behind the scenes to do lots of things - so you can use the jquery .animate function to add things in. This is all javascript based and can be a bit tricky to get working correctly. I don’t have a ton of time - but here’s a super quick sample that incorporates animation of the two items you noted. They are accomplished by adding an “open link” action with some javascript injected on click of the BG rectangle. It’s not perfect and would probably require some tweaks to your .rp file to work correctly. But this might get a ball rolling…

fontsize_color.rp (49.2 KB)

Note that injecting JS is not supported by Axure officially. Won’t void your warranty, but this sort of thing is kind of “on your own” and requires a lot of trial and error.

1 Like