How can this animated purple line behind text be designed in Studio Wix?

Ask the community
,
1

Question:
Does anybody know how the purple text effect on this website designed with Studio Wix can be achieved: https://www.aura-studios.com/

Product:
Wix Studio

2

Hi, Livian_LLC !!

Is it about the purple line animation that extends to the right behind the text?

If that’s the case, it is likely that a line element is placed behind the text, and that line element has a reveal animation similar to Wix Studio’s standard reveal animation.

1 Like
3

Thank you so much!!! Giving it a try right now :slight_smile:

1 Like
4

The purple background, or the text being different purple and adifferent font than the rest of the text?

1 Like
5

Hi Simen, the purple background that reveals itself. I have not quite gotten it yet! Thank you so much.

Screenshot 2024-08-08 at 4.21.38 PM
Screenshot 2024-08-08 at 4.21.38 PM2092Ă—812 72.5 KB

6

Make the background box the way you want it (either by making a line, or creating a container). Select it, then open Animations in the inspector panel

image
Select Reveal and click Adjust animation. Set Direction to From left. Then you can play around with duration and delay until you get it to come in the way that you want :slight_smile:

2 Likes
7

Fantastic!!! The line animation totally works. Thank you so much. Now on the second point: how can I add that line right behind text? It simply does not want to. LOL :roll_eyes:

8

Hi, Livian_LLC !!

  1. Place the Elements: Start by placing the line element on top of the text element (or vice versa, depending on which should be on top).

  2. Select the Line Element: Right-click on the line element.

  3. Choose “Arrange”: From the menu, select the “Arrange” or “Position” option.

  4. Select “Send to Back”: Choose the option “Send to Back” or “Send Backward.”

  5. Repeat if Necessary: If the line element does not move behind the text element on the first attempt, repeat this action until the line element is completely behind the text element.

  6. If Text is on Top: If the text element was originally on top, choose the opposite option, such as “Bring to Front” or “Bring Forward,” and perform the same steps to adjust the stacking order.

This process will help you correctly adjust the stacking order of the line and text elements.

1 Like
9

Wonderful!!! Thank you so much. It worked now :slight_smile:

1 Like