[For Beginners] How to Easily Flip Images in Studio | Utilizing the Motion Scale Feature!

In web development and design, there are times when you might think, "I want to flip the image horizontally" or "I want to flip it vertically," right?
Unlike design tools like Framer and Figma, in Studio, you can intuitively flip images without thinking about CSS.

This article introduces the easiest method to flip images in Studio. No special code is needed! Just setting the motion is sufficient.

🔧 Method: Use the Scale of Motion to Flip

Flipping an image in Studio can be achieved using the Scale function found in the "Motion" tab.
Both horizontal and vertical flips can be configured with the following steps.

✅ Horizontal Flip (Flip like a mirror)

1. Select the image element that you want to flip in Studio

2. Open the "Motion" tab from the top panel

3. Check the settings of "Scale"

4. Change the value of "X" from 1 to -1

And with that, the image will be flipped horizontally!

📝 Note:
This works by setting the X-axis scale to a negative value, which flips the element horizontally.

✅ Vertical Flip (Reverse up and down)

1. Select the image element that you want to flip in Studio

2. Open the "Motion" tab from the top panel

3. Check the settings of "Scale"

4. Change the value of "Y" from 1 to -1

And with that, the image will be flipped vertically!

🎯 Application Example: Flip on Mouse Hover

In Studio, you can also make use of "Motion Trigger," making it easy to create dynamic effects like "flipping the image horizontally on hover."

🚨 Caution

• If the scale is set to a negative value, it might affect text and other elements as well. It is safer to group the objects for adjustments.

• Setting the scale to -1 may cause some images to lose anti-aliasing, so be sure to preview it.

🧩 Summary

In Studio, flipping an image is very easy with just the motion settings. Even without knowledge of CSS or JS, the visual operation is appealing!