How to create a Before & After effect | Wix Studio #wixstudio #beforeafter #lowcode

Introduction

In this tutorial, we'll walk you through creating a stunning before & after effect using Wix Studio without writing any code. This effect is extremely popular on Instagram. By following these steps, you'll be able to recreate it yourself.

Step 1: Setting up in Figma

1. Create a Frame: Open Figma, press F to create a frame, and resize it as needed.
2. Add Rectangles: Choose a rectangle and add it to the frame. Add another smaller rectangle to the bottom left corner. Duplicate it and move it to the top right corner, then resize as needed.
3. Merge Shapes: Select all three rectangles, go to Boolean operation, and choose "Subtract Selection." The rectangles will merge into one shape.
4. Round Corners: Round the corners to your preference.
5. Save as SVG: Export the shape in SVG format.

Step 2: Using Wix Studio

1. Change Background Color: Open Wix Studio and change the background color.
2. Add a Video Element: Go to "Add Elements" and choose a video element. Resize it accordingly.
3. Apply Mask: Click on "Mask" and add the shape you created. Click "Mask to Shape" to transform the video.
4. Change Video: Go to the gallery and select a video. Wix Studio offers a huge selection of free videos.

Step 3: Adding Custom Buttons

1. Create a Container for Buttons: Use a container and customize it—round the corners, remove the background color, and add borders.
2. Add Text: Add text to the button and edit it to your preference.
3. Add an Arrow: Go to "Add Elements," choose a shape, change its properties, and place it into the container. Align the text and arrow and stack them together.
4. Duplicate the Button: Duplicate to create additional buttons instead of making new ones from scratch.

Step 4: Adding Glassmorphism Effects

1. Add a Glassmorphism Container: Remove the background color, add an iframe, and insert your glassmorphism code. Feel free to edit the text block as needed.
2. Duplicate the Block: Duplicate the container for different sections and resize them, replacing information inside.

Step 5: Adding a Menu Bar and Animations

1. Create a Menu Bar: Add a button to the menu bar and link it to any page. Customize it by rounding corners and removing the background color.
2. Create Hover Effects: Duplicate the button, change its properties, and this will act as the hover version.
3. Add Social Media Icons: Select icons from the Wix Studio library or add your own.
4. Add Animations: Enhance your design by adding animations to each block, making your design more engaging.

---

If you like my videos and want to see more tutorials, make sure to like and subscribe. Thanks for watching, and see you in the next video!

---

Keywords

• Wix Studio
• Before & After Effect
• No Code
• Figma
• Video Masking
• Button Creation
• Glassmorphism
• User Interface
• Animations
• Web Design

FAQs

Q: Can I create different shapes for the video mask?

Yes, you can create any shape you want in Figma and export it as an SVG to use as a video mask in Wix Studio.

Q: Is it possible to use my own videos instead of Wix's gallery?

Absolutely. You can upload and use your own videos in Wix Studio alongside the free options available in their gallery.

Q: How do I add custom fonts to Wix Studio?

You can add your own font by simply uploading it to Wix Studio in the font section.

Q: What is glassmorphism and how do I implement it?

Glassmorphism is a design trend that mimics the appearance of frosted glass. You can achieve this effect by using specific CSS code, which you can add to an iframe within Wix Studio.

Q: How can I add animations to my design blocks?

Wix Studio allows you to add animations to any design block by selecting the block and applying the desired animation settings.