Morphing means to change or morphs one image or shape into another. It is a special effect in motion pictures and animations to give them a flawless transition. To add some special effect to your website image ElementsKit is presenting you a fully customizable widget name Image Morphing.
With ElementsKit, you can easily create interactive image transitions by utilizing an image morphing widget. It lets you customize effects, direction, and animation controls with flexibility.
Quick Steps:
1. Enable the ElementsKit Image Morphing widget.
2. Open a page with Elementor and drag & drop the Image Morphing widget.
3. Customize content: choose effect type, add image, and adjust morphing settings (style, direction, duration, etc.).
4. Style the design by adjusting image size, opacity, filters, and shape settings.
5. Click Publish/Update to apply the morphing effect on your site.
ElementsKit Image Morphing #
First, install and activate ElementsKit Pro plugin on your WordPress dashboard.
STEP 1: Enable the Widget #
- Go to your WordPress Dashboard
- Find ElementsKit
- Click Widgets
- Turn ON the Image Morphing widget
- Save the changes
STEP 2: Edit a Page with Elementor #
Select a page where you need to apply image morphing and edit it with Elementor.
- Search Image Morphing widget
- Drag and Drop it simply
STEP 3: Customize ElementsKit Image Morphing widget #
Select Effect Type- Choose the effect from Image, Color, and Gradient Color options.
Content #
Select Effect Type- Choose the effect from Image, Color, and Gradient Color options.
Image Effect
- Choose Image- Upload an image
- Image Size- It will allow you to adjust the image size
- Image Resolution- You can adjust the image resolution from te options.
Color Effect:
Show Stroke- If you choose color then this field will allow you to Show or Hide stroke.
Gradient Color Effect:
If you choose gradient color as effect type then you will have the position adjusting options- Position X1, Position X2, Position Y1, and Position Y2.
Settings:
Shape Type- Select Default then you will see the customization options below:
- Morphing Effect: Controls the easing and pacing of the transformation (e.g., Linear, EaseOutInQuad, EaseInCirc, etc.).
- Morphing Direction: Defines the sequence and order in which the SVG shapes transition into one another. Three options are- Normal, Reverse, and Alternate.
- Loop: Dictates whether the animation plays just once or repeats continuously.
- Duration(s): Sets the total time in seconds that it takes for one shape to fully morph into the next.
- Delay(s): Sets a pause in seconds before the morphing animation begins for the first time.
- End Delay(s): Sets a pause in seconds on the final shape before the animation loops or stops.
However, if you choose custom style then you can generate a morphing SVG with blobmaker.
Also, you can upload your own morphing SVG. Note that, you have to upload minimum two SVG to morphing work.
Style #
The styling options are available for Image, Color, and Gradient effects.
Image Style
In this section, you can adjust the image Width, Height, Opacity, CSS filters, Image zoom, image position in Horizontal orientation wise and vertical orientation wise.
Color Style
For Color effect type, you will have options to customize SVG color.
Gradient Style
There are two color options, you have to choose accordingly and adjust Offset also.
Sape Size
This option is common for all the effect type. You can adjust the width and the height of the effects based on your needs.
This is an example of image morphing we have customized for you-
To showcase different images in attractive way through animation and uncommon effects, ElementsKit Image Morphing widget is your best choice.
