Anwar Hossain

Elematic is a fast, lightweight addon for the Elementor page builder, designed for modern WordPress websites. It includes beautifully animated widgets inspired by Webflow and Framer, giving you motion-design freedom directly inside Elementor without writing custom code.
Whether you’re building a landing page, business website, portfolio, SaaS layout, or eCommerce product page, Elematic gives you all the essential visual widgets to design clean, interactive, and high-converting layouts.
This addon focuses on performance, styling flexibility, and usability. Every widget loads only when used, ensuring fast page load, better Core Web Vitals, and a higher Google PageSpeed score.
🚀 With Elematic, you can create:
<ul>
<li>High-engagement landing pages</li>
<li>Animated portfolio and creative UI layouts</li>
<li>Modern SaaS and agency websites</li>
<li>Interactive product presentations</li>
<li>Stunning hero sections with motion graphics</li>
</ul>
👉 Perfect for: 
✔ Designers 
✔ Agencies 
✔ Bloggers 
✔ Developers 
✔ WooCommerce and marketing pages 
✔ Anyone who wants better animations than the default Elementor widgets
🔥 Key Highlights
<ul>
<li>Built for performance (no unnecessary scripts)</li>
<li>Modern UI and clean markup</li>
<li>Works with Elementor Free & Pro</li>
<li>Responsive and SEO friendly</li>
<li>Growing widget library</li>
</ul>
🚀 What You Can Build With Elematic
<ul>
<li>Animated headings and scroll-text reveals</li>
<li>Filterable portfolio galleries with lightbox</li>
<li>Advanced post grids with Load More AJAX pagination</li>
<li>Circular/linear progress bars and skill sections</li>
<li>Marquee text, image sliders, and auto-scroll sections</li>
<li>Data charts for analytics dashboards</li>
<li>Hero banners with rotating text or image strips</li>
<li>Feature hotspots and interactive UI sections</li>
</ul>
Every widget includes granular styling controls for typography, spacing, hover effects, responsive behavior, and color management.
<h3>Included Widgets</h3>
<ul>
<li>
Accordion. Clean collapsible FAQ sections with icons and smooth animation.
</li>
<li>
Animated Heading. Dynamic title animations (typed, sliding, or looping) to highlight key headlines.
</li>
<li>
Animated Shape. Modern motion shapes and blobs to add subtle, looping background animation to sections and hero areas.
</li>
<li>
Banner. Create modern hero banners with image, title, subtitle, and CTA buttons with animations, perfect for landing pages and marketing sections.
</li>
<li>
Button. Customizable button with icons, hover effects, and full control over typography, spacing, and borders.
</li>
<li>
Chart. Responsive, animated charts (bar, line, pie, radar, horizontal, vertical, etc.) powered by your data, with full color and typography control for dashboards and stats sections.
</li>
<li>
Circle Info. Interactive circular feature widget with auto/manual rotation and clickable icons revealing detailed content in the center.
</li>
<li>
Circle Progress Bar. Animated circular progress indicator with percentage display and full styling control for dashboards, skills, and achievement counters.
</li>
<li>
Circle Text (Webflow + Framer style). Create rotating circular text around logos or icons with smooth Webflow/Framer-style animation for badges, seals, and hero sections.
</li>
<li>
Contact Form 7. Style Contact Form 7 forms inside Elementor with custom spacing, colors, and typography without touching CSS.
</li>
<li>
Countdown. Create animated countdown timers for launches, sales, or events with full control over layout, labels, and expiry actions.
</li>
<li>
Counter. Animate numbers from any start/end value with icons, prefixes, and suffixes to highlight key stats or milestones.
</li>
<li>
Dual Button. Create side-by-side CTA buttons with separate links and icons, featuring 50 built-in gradient presets for instant modern styling.
</li>
<li>
Features. Create flexible feature sections with custom items or fully dynamic content pulled from any post type. Supports images, titles, descriptions, meta info, and multi-column layouts for building service lists, feature highlights, or dynamic content showcases.
</li>
<li>
Flip Box. Create interactive cards that flip on hover with zoom, up/down, left/right and other 3D flip effects to reveal extra info or CTAs.
</li>
<li>
Gallery. Responsive, filterable image gallery with hover effects, spacing control, and built-in lightbox/popup modal for clean portfolio and showcase layouts.
</li>
<li>
Grid. Flexible multi-column content grid with image, icon, title, description, read-more link, and optional image lightbox for services, features, or portfolio cards.
</li>
<li>
Highlight Text (Webflow + Framer style). Scroll-triggered highlight text effect inspired by Webflow and Framer, animating your headings or paragraphs as they enter the viewport.
</li>
<li>
Hotspot. Lets you add clickable markers over images with tooltips or popups, perfect for product highlights, maps, and interactive storytelling.
</li>
<li>
Icon Box. Lets you showcase features in 3 layouts using icon or image, with full-box hover effects for highly interactive service or feature blocks.
</li>
<li>
Image Animate. Adds smooth left-right and up-down reveal animations to your images for simple, lightweight scroll-based motion effects.
</li>
<li>
Image Box. Displays an image with title, description, and optional button in multiple layouts, ideal for feature/service cards and promo blocks.
</li>
<li>
Image Comparison. Add an interactive draggable before/after slider with hover, smoothing, and label controls for showcasing transformations or visual changes in horizontal and vertical orientation.
</li>
<li>
Image Hover. Add 30+ modern hover effects to images with title, description, and overlay controls for eye-catching rollovers.
</li>
<li>
Image Mask. Clip images into 80+ ready-made artistic shapes (ink, blobs, badges, etc.) for instant Webflow-style image frames.
</li>
<li>
Image Scrolling. Create smooth horizontal or vertical image scrolling effects for product shots, long screenshots, or parallax-style image reveals.
</li>
<li>
Image Slide (Webflow + Framer style). Create smooth looping image strips that slide left, right, up, or down for modern Webflow/Framer-style hero and gallery sections.
</li>
<li>
Info Link. Create an interactive tab-style content switcher with icons where text changes dynamically on click for cleaner layouts and better UX.
</li>
<li>
Lottie. Add lightweight JSON animations with full playback controls, autoplay, loop, speed adjustment, and scroll-based animation support.
</li>
<li>
Marquee (Webflow + Framer style). Create smooth, looping marquee rows for text or logos with controllable speed, direction, and hover pause, inspired by Webflow and Framer motion rails.
</li>
<li>
Post Alter. Display blog posts in an alternating left-right layout with featured images, meta info, excerpt. Perfect for storytelling-style blog layouts.
</li>
<li>
Post Grid. Display posts in a customizable grid with category filters, numbered pagination and AJAX “Load More” button without page reload.
</li>
<li>
Progress Bar. Show elegant vertical or horizontal progress indicators for skills, stats, or milestones with full color and animation controls.
</li>
<li>
Service List (Webflow + Framer style). Display modern, animated service rows with icons, descriptions, title, subtle and hover image inspired by Webflow and Framer layouts.
</li>
<li>
Table. Create responsive, styled data tables with headings, rows, and typography controls for pricing, feature comparison, or structured content layouts.
</li>
<li>
Timeline. Visual timeline with custom or dynamic posts, alternating layouts, dates, images, and smooth milestone animations.
</li>
</ul>
More widgets will be added in future releases.
⭐ Who Is Elematic For?
<ul>
<li>You want Elementor widgets that look modern and premium</li>
<li>You like Webflow / Framer-style animations</li>
<li>You need creative UI components Elementor doesn’t provide by default</li>
<li>You want a plugin that won’t slow down your website</li>
</ul>
🔥 Why Users Love Elematic
<ul>
<li>Fluid Webflow-style animations without heavy scripts</li>
<li>Framer-style motion elements for creative websites</li>
<li>30+ essential and premium-quality Elementor widgets</li>
<li>Clean CSS output, no bloat</li>
<li>Works with Elementor Free + Pro</li>
<li>Fully responsive, fast, and SEO-friendly</li>
</ul>
Build interactive content sections, product highlights, service grids, scroll animations, image masking, galleries, before/after sliders, counters, progress indicators, and more — all inside Elementor.
🧩 Growing Library
Elematic continues to evolve. New widgets, presets, effects, and layout packs are released frequently based on community feedback.
<h3>Features</h3>
<ul>
<li>Works with Elementor Free and Pro </li>
<li>Minimal script loading — only loads assets for active widgets </li>
<li>Fully translation ready </li>
<li>Compatible with caching and optimization plugins</li>
<li>Optimized for Google PageSpeed and Lighthouse scores (performance, accessibility, SEO)</li>
</ul>
Fully compatible with Elementor Hello theme and popular themes like Astra, GeneratePress, OceanWP, Phlox, and Blocksy.
<h3>Translation</h3>
This plugin is translation-ready and includes a .pot file.
<h3>Support</h3>
For support questions, please use the WordPress.org support forum. This helps other users find solutions.
If you find a bug or have a feature request, open an issue here: 
https://github.com/xy440/elematic-addons-for-elementor/issues
We actively review requests and publish updates based on real user feedback.
<h3>Credits</h3>
Developed by <a href="https://github.com/xy440" rel="nofollow ugc">Anwar Hossain</a>

Elematic — Addons for Elementor

Modern Elementor addons with Webflow-style animations, AJAX Post Grid, marquee text, circle text, masking, and 30+ creative widgets.

Qi Addons For Elementor vs Elematic — Addons for Elementor