BricksFly Elements and Templates for Bricks with GSAP Animations

Description

BricksFly adds Elements, Extensions, and a no-code GSAP animation engine to Bricks Builder. It helps designers and developers build interactive, animated websites without writing custom JavaScript. Premium website templates and sections are available with BricksFly Pro. It is made by the team behind Animation Addons, a GSAP animation toolkit for WordPress.

Main features:

• 45+ Bricks Elements and Extensions, covering content, video, marketing, dynamic layouts, and workflow tools. Some are part of BricksFly Pro.
• A no-code GSAP animation engine: ScrollTrigger, SplitText, parallax, horizontal scroll, sticky and pin, smooth scroll, image reveal on hover, and cursor effects.
• A built-in Template Library with 30+ full website templates and 500+ premium sections (BricksFly Pro).
• Responsive controls, live previews, and selective asset loading.

Enable only the Elements and Extensions you need on each site. Animation controls can also respect reduced-motion preferences.

Useful links: Live demo | Documentation | All Elements | Starter templates | Sections | FAQ | Support | Community

Watch a quick overview:

More tutorials and walkthroughs are on the BricksFly YouTube channel.

Elements for Bricks

Design dynamic Bricks websites with a rich set of Elements, from creative layouts to marketing blocks. Just drag, drop, and customize. See them all on the Elements page.

General Elements

• Advanced Button Pro: Create customizable Bricks buttons with modern hover styles and animations.
• Social Icons: Display social media icons with custom styles and hover effects.
• Brand Slider: Show client or brand logos in a customizable, animated slider.
• Counter: Display animated number counters for statistics and milestones.
• Progress Bar: Show progress indicators in multiple animated styles.
• Gallery Progress (Pro): Display an image gallery with an animated progress indicator.
• Icon Box: Display icons with titles and descriptions in clean, flexible layouts.
• Testimonial: Showcase client reviews with customizable layouts.
• Classic Testimonial: Display testimonials in a clean, classic style.
• Modern Testimonial: Present testimonials with modern, animated layouts.
• Team: Showcase your team members professionally with hover effects.
• Timeline: Tell your story with animated, scroll-triggered timeline layouts.
• Floating Elements: Add floating, rotating, zooming, and motion effects to any element.

Animation Elements

• Animated Heading: Create animated headings with multiple text effects and triggers.

Header & Footer Elements

• Animated Off-Canvas (Pro): Create animated off-canvas panels for menus or custom content.

Dynamic Elements

• Social Share (Pro): Enable social sharing for any post or page.
• Post Meta: Show post metadata such as date, author, and category.
• Video Story: Present posts or content in an engaging video story format.

Video Elements

• Video Popup (Pro): Display videos inside a popup modal to boost engagement.
• Video Box: Embed external or self-hosted videos directly inside Bricks.
• Video Mask: Apply creative masks and visual effects to video elements.
• YouTube Video (Pro): Embed and customize YouTube videos with advanced controls.
• Scrollable Video: Play or scrub a video as the visitor scrolls the page.
• Video Box Slider: Display videos in a responsive slider layout.

Advanced Elements

• Image Accordion: Highlight images with smooth accordion-style interactions.
• Toggle Switch: Add interactive on and off toggle elements for content control.
• Draggable Items: Add drag-and-drop interactive items to a page.

Extensions for Bricks

BricksFly includes a growing set of Extensions that enhance your Bricks workflow. Enable only what you need to keep your site lightweight and fast. Some Extensions are part of BricksFly Pro.

GSAP Extensions

• Scroll Smoother: Add smooth scrolling for a modern, fluid browsing experience.
• Animation: Create custom Bricks animations with flexible triggers and timing.
• Sticky/Pin Element: Keep sections or elements fixed during scrolling for sticky effects.
• Text Animation: Build dynamic SplitText animations including text reveal, fade, 3D text, and character-by-character effects.
• Image Animation: Apply dynamic motion effects to images for better visual engagement.
• Parallax Effect: Add creative parallax scrolling effects to any element or section.
• Effects: Apply ready-made motion effects to your Bricks elements.
• Cursor Hover Effect: Add interactive hover animations triggered by cursor movement.
• Image Reveal on Hover: Reveal images smoothly on hover for modern design layouts.
• Cursor Move Effect: Create motion effects that respond to user cursor movement.
• ScrollTrigger: Trigger advanced animations based on scroll position using GSAP ScrollTrigger.
• Horizontal: Build horizontal scroll animations using GSAP ScrollTrigger.
• ScrollTo: Create smooth scroll-to navigation for one-page Bricks websites.

General Extensions

• Tilt Effect: Create mouse-based tilt animations for interactive Bricks elements.
• Advanced Tooltip: Add rich, interactive tooltips to display extra information on hover.
• Wrapper Link: Make entire sections, containers, or blocks fully clickable without extra code.
• Preloader: Display custom preloader animations while your Bricks site loads.
• Cursor: Replace the default cursor with custom designs and interactive cursor styles.
• Scroll Indicator: Show a reading progress bar or scroll indicator on any page.
• Scroll To Top: Add a customizable scroll-to-top button for better navigation.

Explore individual features: Sticky and pin elements, Split text animation, Image animation, Image reveal on hover, Horizontal scroll, Cursor hover effect, and Advanced tooltip.

No-Code GSAP Animation Engine

Build advanced motion visually inside Bricks, without writing custom JavaScript. Pick a trigger, set the options, and preview it live. Supported effects include ScrollTrigger scroll animations, SplitText text reveals, parallax, horizontal scroll, sticky and pin sections, smooth scrolling, and cursor effects.

Watch a SplitText animation built in Bricks:

Website Templates and Sections (BricksFly Pro)

With BricksFly Pro, start from 30+ ready-made, professionally designed Bricks starter sites with inner pages, then build any page faster with 500+ premium sections. Import runs one click from the built-in Template Library, and every design is editable inside Bricks and ready to animate. Browse the starter templates and sections, or try the live demo.

Watch a full site imported in minutes:

Who BricksFly is for

BricksFly fits freelancers who want to deliver more without subcontracting, agencies that need a repeatable production workflow, designers who want to own the final result, and business owners who want to manage their own site. Developers use it to skip repetitive setup and spend time on custom work. Learn more on the What is BricksFly page.

External Services

The plugin connects to the services below only when the related feature is used. Requests may include standard connection data such as an IP address, user agent, site URL, and referrer.

1. ThemeCrowdy template library and starter templates (https://www.themecrowdy.com/)

ThemeCrowdy is the remote template library service operated by the BricksFly team. It powers the plugin’s built-in Template Library screen and the “Import Section” panel in the Bricks Editor. It is queried whenever an administrator opens that screen, loads the library menu, searches or filters it, or clicks to import a template, section, or starter site.

What is sent and when:

• Loading the library menu. When the plugin dashboard or Template Library loads, it requests the library navigation from https://www.themecrowdy.com/wp-json/wcf/v1/menu/42. Only standard connection data is sent.
• Opening the library. Clicking “Import Section” in the Bricks Editor toolbar loads the browsable list from https://www.themecrowdy.com/wp-json/wp/v2/bricks-sections and the category filter options from https://www.themecrowdy.com/wp-json/wp/v2/bricks-sections-category. Only standard connection data is sent, no site or user information.
• Searching and filtering. Choosing a category or color, switching between section and page results, or paging further down the list re-sends the same bricks-sections request with your chosen filters (type, category, color_type, page) and any search text (s) attached. Searching from the plugin’s own Template Library screen instead calls https://www.themecrowdy.com/wp-json/wp/v2/brk-templates?title-search=yes&s={your search text}. In both cases the only thing added is what you typed or selected.
• Importing. Clicking “Import” sends the numeric template ID to https://www.themecrowdy.com/wp-json/bricks-sections/v1/list/{template_id}, which returns that template’s download link. Your site then fetches the Bricks JSON from https://www.themecrowdy.com/wp-json/bricks-sections/v1/download?id={template_id}. Both requests are made server-to-server by your site, not by your browser. The downloaded design is handed straight to the Bricks Editor and is only stored once you save the page.

No passwords, license keys, or account details are ever sent with these requests. ThemeCrowdy is operated by the same team as BricksFly. Terms: https://bricksfly.com/terms-condition/ | Privacy: https://bricksfly.com/privacy-policy/

2. Dashboard blog posts (https://bricksfly.com/)

The plugin dashboard shows a short list of recent BricksFly blog posts. Opening the dashboard loads each post’s thumbnail image from https://bricksfly.com/blog/, which sends only the site’s IP, user agent, and referrer, no site, user, or license data. The post titles are ordinary links that open https://bricksfly.com/blog/ in a new tab, so they connect only if you click one. Provider: BricksFly. Terms: https://bricksfly.com/terms-condition/ | Privacy: https://bricksfly.com/privacy-policy/

3. YouTube embedded player (https://www.youtube.com/)

Displays configured YouTube videos and dashboard tutorials. On load, YouTube receives the video ID, user agent, referrer, and permitted cookies. Provider: Google / YouTube. Terms: https://www.youtube.com/t/terms | Privacy: https://policies.google.com/privacy

4. Vimeo embedded player (https://player.vimeo.com/)

Displays configured Vimeo videos. On load, Vimeo receives the video ID. Provider: Vimeo. Terms: https://vimeo.com/terms | Privacy: https://vimeo.com/privacy

5. Feature request submission (https://bricksfly.com/)

Used only when an administrator submits the dashboard “Request a Feature” form. Sends the entered name, email, and feature text plus the site URL to the author, who relays it as an email. Provider: BricksFly. Terms: https://bricksfly.com/terms-condition/ | Privacy: https://bricksfly.com/privacy-policy/

Administrator-supplied remote media

If an administrator enters a third-party media URL, visitors connect to that host when the media loads. The host receives normal browser request data, and its own terms and privacy policy apply.

Source Code

This plugin’s distributed /public/build/ directory contains compiled/minified JavaScript and CSS produced by a Webpack build, including the numbered chunk files (e.g. 10.js, 35.js, 671.js) generated for the React-based admin dashboard and page-import screens. The unminified, human-readable source for all of it, the React admin UI (/src/admin/dashboard, /src/admin/page-import), frontend/element/extension JS and SCSS (/src/js, /src/scss), is publicly available in this plugin’s source repository:

https://github.com/Wealcoder/bricksfly-elements-for-bricks

Build instructions:

1. Clone the repository.
2. Run npm install.
3. Run npm run build.

This produces the same /public/build/ output shipped in this plugin, including the numbered chunk files referenced above.

Third-party Libraries

The following third-party libraries or generated assets are included in the plugin’s distributed files. Versions listed below are the versions used to produce the bundled assets in this release.

Note: GSAP (GreenSock Animation Platform), together with its ScrollTrigger, SplitText, ScrollSmoother, and ScrollTo plugins, is bundled and documented in the companion “BricksFly Pro” plugin’s own readme. It is not included in this plugin’s distributed files.

PHP importer

• WXR Importer 2.0 – modified development snapshot (the upstream project has no tagged release version) – GPL-2.0-or-later – https://github.com/humanmade/WordPress-Importer
  The adapted importer code is located under /admin/base/, with plugin-specific integration under /admin/Importer.php, /admin/Logger.php, and /admin/aab-importer.php.

JavaScript libraries bundled in the compiled admin assets

• shadcn/ui – modified source components; the project does not publish versioned packages – MIT – https://github.com/shadcn-ui/ui
• Radix UI Primitives – MIT – https://github.com/radix-ui/primitives
  Included packages: Accordion 1.2.16, Avatar 1.2.2, Checkbox 1.3.7, Dialog 1.1.19, Dropdown Menu 2.1.20, Icons 1.3.2, Label 2.1.11, Navigation Menu 1.2.18, Popover 1.1.19, Progress 1.1.12, Radio Group 1.4.3, Scroll Area 1.2.14, Select 2.3.3, Separator 1.1.11, Slot 1.3.0, Switch 1.3.3, Tabs 1.1.17, Toggle 1.1.14, Toggle Group 1.1.15, and Tooltip 1.2.12.
• TanStack React Table 8.21.3 – MIT – https://github.com/TanStack/table
• React Hook Form 7.81.0 – MIT – https://github.com/react-hook-form/react-hook-form
• React Hook Form Resolvers 3.10.0 – MIT – https://github.com/react-hook-form/resolvers
• Zod 3.25.76 – MIT – https://github.com/colinhacks/zod
• Lucide React 0.446.0 – ISC – https://github.com/lucide-icons/lucide
• React Icons 5.7.0 – MIT – https://github.com/react-icons/react-icons
• cmdk 1.1.1 – MIT – https://github.com/pacocoursey/cmdk
• Sonner 1.7.4 – MIT – https://github.com/emilkowalski/sonner
• Vaul 1.1.2 – MIT – https://github.com/emilkowalski/vaul
• next-themes 0.4.6 – MIT – https://github.com/pacocoursey/next-themes
• Class Variance Authority 0.7.1 – Apache-2.0 – https://github.com/joe-bell/cva
• clsx 2.1.1 – MIT – https://github.com/lukeed/clsx
• tailwind-merge 2.6.1 – MIT – https://github.com/dcastil/tailwind-merge
• ProgressBar.js 1.1.1 – MIT – https://github.com/kimmobrunfeldt/progressbar.js
  The standalone build at /public/js/lib/progressbar.min.js includes its Shifty and lodash.merge runtime dependencies.

Bundled fonts

• Inter – variable font, Google Fonts release v20 – SIL OFL 1.1 – https://github.com/rsms/inter
• Figtree – variable font, Google Fonts release v9 – SIL OFL 1.1 – https://github.com/erikdkennedy/figtree
  Both families are bundled as local .woff2 files in /public/fonts/ (latin and latin-ext subsets, normal style) and served from the plugin directory, so the dashboard makes no request to Google Fonts. The full license text and copyright notices are in /public/fonts/OFL.txt.

CSS and icon-font build sources

• Tailwind CSS 3.4.19 – MIT – https://github.com/tailwindlabs/tailwindcss
• tailwindcss-animate 1.0.7 – MIT – https://github.com/jamiebuilds/tailwindcss-animate
• IcoMoon-generated icon fonts – font metadata version 1.0 – https://icomoon.io/app/
  The files under /public/fonts/ contain the custom dashboard icon glyphs. IcoMoon was used to generate the font files; the IcoMoon application itself is not bundled with this plugin.

Host-provided libraries not bundled by this plugin

• React and React DOM – built against 18.3.1 – MIT – https://github.com/facebook/react
  These packages are configured as Webpack externals and are supplied by WordPress through its registered script handles.
• jQuery and jQuery UI Draggable are supplied by WordPress.
• Swiper and Font Awesome are supplied by the required Bricks theme through Bricks-registered asset handles.

License texts:

• MIT: https://opensource.org/license/mit/
• ISC: https://opensource.org/license/isc-license-txt/
• Apache-2.0: https://www.apache.org/licenses/LICENSE-2.0
• SIL OFL 1.1: https://scripts.sil.org/OFL
• GPL-2.0-or-later: https://www.gnu.org/licenses/gpl-2.0.html