{"id":267,"date":"2026-07-13T10:25:56","date_gmt":"2026-07-13T10:25:56","guid":{"rendered":"https:\/\/bricksfly.com\/blog\/?p=267"},"modified":"2026-07-14T05:28:01","modified_gmt":"2026-07-14T05:28:01","slug":"animated-agency-website-bricks","status":"publish","type":"post","link":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/","title":{"rendered":"How to Build Animated Agency Websites in Bricks"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Your agency&#8217;s website is the most important pitch you&#8217;ll ever build, so learning how to build an animated agency website in Bricks is time well spent. Whether it&#8217;s your own agency site or a client&#8217;s, an agency website has a clear job: establish credibility, showcase services and work, and convert visitors into leads. Animation, used well, strengthens every part of that, a hero that commands attention, services that reveal in sequence, a portfolio that feels premium, and testimonials that build trust at the right moment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The difficulty is that the effects that make an agency site feel high-end, scroll reveals, animated headings, sequenced service grids, are powered by <a href=\"https:\/\/gsap.com\/\">GSAP<\/a> and traditionally require code. For agencies and freelancers who want to move fast and don&#8217;t have a developer free for every animation, that&#8217;s a barrier. Too often the result is a competent but flat site that doesn&#8217;t reflect the quality of the work behind it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide walks through building an animated agency website in Bricks, the homepage structure that converts, the key sections (services, portfolio, testimonials, CTAs), and the animations that suit each, all buildable without code. You&#8217;ll get a practical, section-by-section approach, and see how a toolkit like <a href=\"https:\/\/bricksfly.com\/\">BricksFly<\/a>, with agency templates and no-code animation, makes a premium animated agency site achievable fast.<\/p>\n\n\n\n<section style=\"background:#f8fafc; border-left:4px solid #2563eb; padding:20px 24px; margin:32px 0; border-radius:8px;\">\n  <strong>Quick Answer:<\/strong> To build an animated agency website in Bricks, start with an agency template, then structure the homepage as <strong>Hero<\/strong>, <strong>Services<\/strong>, <strong>Portfolio<\/strong>, <strong>Testimonials<\/strong>, and <strong>CTA<\/strong>. Add no-code animations that fit each section: <strong>split text<\/strong> on the hero, <strong>staggered reveals<\/strong> on services, <strong>image reveals<\/strong> on the portfolio, and an <strong>animated CTA<\/strong>. Tools like <strong>BricksFly<\/strong> provide agency templates and these effects together.\n<\/section>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>Why Agency Websites Need Animation<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An agency site has to do more than look nice, it has to prove capability and drive action. Animation supports both, which is why it&#8217;s worth building in deliberately.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" src=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Why-Agency-Websites-Need-Animation.webp\" alt=\"Why agency websites need animation\" class=\"wp-image-270\" srcset=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Why-Agency-Websites-Need-Animation.webp 1448w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Why-Agency-Websites-Need-Animation-300x225.webp 300w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Why-Agency-Websites-Need-Animation-1024x768.webp 1024w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Why-Agency-Websites-Need-Animation-768x576.webp 768w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, an agency website is <strong>evidence of your skill<\/strong>. Clients hiring an agency want proof you can deliver modern, premium work. A polished, animated site demonstrates exactly that, before a single word of copy is read. A static, flat site quietly undercuts your pitch, while a well-animated one reinforces it. The site itself becomes a portfolio piece.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Second, animation <strong>guides visitors through your pitch<\/strong>. An agency homepage tells a story: here&#8217;s who we are, what we do, work we&#8217;ve done, what clients say, and how to reach us. <a href=\"https:\/\/bricksfly.com\/blog\/bricks-scroll-animation-engagement\/\">Scroll animation <\/a>lets you pace that story, revealing each section as the visitor reaches it, guiding attention through your services and social proof toward the call to action. This flow is what turns a browser into a lead.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Third, animation <strong>builds trust at key moments<\/strong>. A testimonials section that animates in as the visitor reaches the decision point, or an animated stat that highlights your results, adds emphasis where it matters. Motion draws the eye to your strongest credibility signals right when they&#8217;re most persuasive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The key, as always, is purpose. An agency site benefits from animation that supports credibility and flow, not motion for its own sake. Built deliberately, animation makes an agency website more persuasive, which is ultimately what an agency site is for.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>The Agency Homepage Structure That Converts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before animation, you need the right structure. An effective agency homepage follows a proven flow that moves visitors from awareness to action.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Section<\/strong><\/td><td><strong>Purpose<\/strong><\/td><td><strong>Suggested Animation<\/strong><\/td><\/tr><tr><td>Hero<\/td><td>Grab attention, state what you do<\/td><td>Split text heading<\/td><\/tr><tr><td>Services<\/td><td>Show what you offer<\/td><td>Staggered reveal<\/td><\/tr><tr><td>Portfolio \/ Work<\/td><td>Prove capability with real work<\/td><td>Image reveals<\/td><\/tr><tr><td>Results \/ Stats<\/td><td>Quantify your impact<\/td><td>Animated counters<\/td><\/tr><tr><td>Testimonials<\/td><td>Build trust with social proof<\/td><td>Scroll reveal<\/td><\/tr><tr><td>About \/ Team<\/td><td>Add human credibility<\/td><td>Subtle reveal<\/td><\/tr><tr><td>CTA \/ Contact<\/td><td>Convert the visitor<\/td><td>Animated CTA<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Hero<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first screen must instantly communicate what your agency does and why it matters. A strong headline, a clear subheadline, and a primary CTA. This is where a premium first impression is made, so it&#8217;s the prime spot for a standout animation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Services<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Show what you offer clearly, usually a grid of service cards with concise descriptions. This section answers &#8220;can they do what I need?&#8221;, so clarity matters. A sequenced reveal draws attention to each service in turn.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Portfolio and Results<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Prove capability with real work and, ideally, measurable results. A portfolio row or grid shows what you&#8217;ve done; stats or a results section quantifies your impact. Together they turn claims into evidence.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Testimonials, About, and CTA<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Testimonials build trust with social proof, the About\/team section adds a human face, and the CTA converts. These lower-page sections carry the visitor from &#8220;interested&#8221; to &#8220;let&#8217;s talk,&#8221; so they deserve attention and well-timed emphasis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>How to Build an Animated Agency Website in Bricks (Step by Step)<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the section-by-section workflow, structure first, then animation, all without code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" src=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-an-Animated-Agency-Website-in-Bricks.webp\" alt=\"How to build an animated agency website in bricks\" class=\"wp-image-268\" srcset=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-an-Animated-Agency-Website-in-Bricks.webp 1448w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-an-Animated-Agency-Website-in-Bricks-300x225.webp 300w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-an-Animated-Agency-Website-in-Bricks-1024x768.webp 1024w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-an-Animated-Agency-Website-in-Bricks-768x576.webp 768w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 1: Start with an Agency Template<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Import an agency <a href=\"https:\/\/bricksfly.com\/templates\/\">website templates<\/a> that includes the homepage and inner pages (about, services, contact). This gives you the proven structure and a professional design baseline in one step, so you customize rather than build from scratch. <\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 2: Customize Structure and Content<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Adapt the template to your agency: replace copy with your services and positioning, add real portfolio work, <a href=\"https:\/\/bricksfly.com\/blog\/bricks-builder-sections\/\">add relevant sections<\/a>, insert genuine testimonials, and apply your branding. Get the content right before animating.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 3: Animate the Hero<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Apply split-text animation to the hero heading so it reveals as the page loads, setting a premium tone. Keep it quick, this is the first impression, and pair it with a clear, visible CTA.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 4: Add Staggered Reveals to Services<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Animate the services grid with a staggered reveal, so the service cards animate in one after another as the section scrolls into view. This choreographed effect draws attention to each offering and feels polished.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 5: Animate the Portfolio and Results<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Apply image reveals to portfolio items so your work appears cleanly as visitors scroll to it. For a stats or results section, use animated counters so the numbers count up, emphasizing your impact.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 6: Add Trust-Building Animation<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Give the testimonials section a scroll reveal so it animates in as the visitor reaches the decision point, drawing focus to your social proof. Keep the about\/team section&#8217;s animation subtle, credibility, not spectacle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Step 7: Emphasize the CTA and Publish<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Give your main call to action a moment of emphasis with an animated reveal, so it stands out when the visitor is ready to act. Then test on mobile, optimize images, respect reduced-motion, replace all placeholders, and publish.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s a complete animated agency website, structured to convert and built without code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>Matching Animation to Each Section<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The skill in an animated agency site is using the <em>right<\/em> effect in each place. Here&#8217;s the logic, so your animation supports the pitch rather than distracting from it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" src=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Matching-Animation-to-Each-Section.webp\" alt=\"Matching animation to each section\" class=\"wp-image-272\" srcset=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Matching-Animation-to-Each-Section.webp 1448w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Matching-Animation-to-Each-Section-300x225.webp 300w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Matching-Animation-to-Each-Section-1024x768.webp 1024w, https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/Matching-Animation-to-Each-Section-768x576.webp 768w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hero make an impression<\/strong>: This is your one shot at a first impression, so a signature effect like split text is justified. It signals quality immediately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Services guide attention<\/strong>: A staggered reveal walks the eye across your offerings one by one, which aids comprehension. Avoid animating all cards at once, the sequence is the point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Portfolio let the work shine<\/strong>: Image reveals should enhance, not overshadow, your work. Keep them clean and subtle so the projects remain the focus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Results add weight<\/strong>: Animated counters make numbers feel significant. This is a case where motion genuinely strengthens the message, watching a figure climb emphasizes it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Testimonials build trust at the right moment:<\/strong> A scroll reveal here times your social proof to appear as the visitor nears a decision, adding persuasive emphasis without being flashy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CTA drive action<\/strong>: A subtle animated reveal gives your conversion point a moment of focus. It should draw the eye, not delay the click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The overall principle: bolder effects up top to make an impression, subtler effects lower down to support trust and conversion. <a href=\"https:\/\/bricksfly.com\/blog\/bricks-animation-examples\/\">Every animation should have a job<\/a> in moving the visitor toward becoming a lead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>Common Mistakes to Avoid<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agency sites are high-stakes, so these mistakes are worth avoiding.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation that overshadows the message<\/strong>: An agency site must communicate clearly. Don&#8217;t let effects distract from your value proposition or slow the visitor&#8217;s path to the CTA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Over-animating<\/strong>: Motion on everything looks amateurish, the opposite of the premium impression you want. Choose purposeful effects and keep the rest subtle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Weak or missing CTAs<\/strong>: All the animation in the world won&#8217;t convert without clear calls to action. Make your CTA obvious and give it emphasis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Unoptimized portfolio images<\/strong>: Agency portfolios are image-heavy. Optimize images so the site stays fast, slow sites undercut your credibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ignoring mobile:<\/strong> Many visitors, including potential clients, are on mobile. Test every section and animation on phones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Fake or placeholder content<\/strong>: Real work and genuine testimonials build trust; leftover template placeholders destroy it. Replace everything.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Forgetting reduced motion<\/strong>: Respect the reduced-motion setting so the site stays usable and professional for everyone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>How BricksFly Helps<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Building an animated agency website is much faster when templates and animation come from one toolkit. BricksFly is a complete Bricks Builder toolkit that includes agency-suitable full website templates plus the <a href=\"https:\/\/bricksfly.com\/blog\/gsap-animation-for-bricks\/\">no-code GSAP animation<\/a> effects an agency site needs, so you can build a premium, converting site visually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start with an agency template, complete with the homepage structure and inner pages, then customize it with your services, work, and branding. From there, BricksFly&#8217;s no-code animation lets you apply the right effect to each section: split text on the hero, staggered reveals on services, image reveals on the portfolio, animated counters for results, and scroll reveals for testimonials and the CTA, all through visual controls, no code. Because these map directly onto the converting agency structure, you&#8217;re building persuasion, not just decoration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Everything living in one toolkit is the bigger advantage. Templates, <a href=\"https:\/\/bricksfly.com\/sections\/\">500+ sections<\/a> for any custom pages, extra Elements, and animation come together, so the whole agency site, structure, content, and motion, is built in one workflow. Whether it&#8217;s your own agency site or a client&#8217;s, that means a premium animated result delivered fast, and a site that proves exactly the kind of work your agency can deliver.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An animated agency website in Bricks has one goal: to prove your capability and convert visitors into leads. The right structure, hero, services, portfolio, results, testimonials, and CTA, carries visitors through your pitch, and animation strengthens every step: a standout hero, sequenced services, a premium portfolio, and well-timed trust and conversion moments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The approach is to build structure first, then match each section to the right effect, bolder up top to make an impression, subtler lower down to support trust and action. Keep images optimized, effects purposeful, and always test on mobile. Done deliberately, animation makes an agency site more persuasive, not just prettier, and the site itself becomes proof of the work you deliver.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The next step is to start from an agency template and build your animated site section by section, so your website pitches your agency as well as you do.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-2-xl-font-size\"><strong>FAQs<\/strong><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1784005200750\"><strong class=\"schema-faq-question\"><\/strong> <p class=\"schema-faq-answer\"><\/p> <\/div> <\/div>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>How do I build an animated agency website in Bricks?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start with an agency template for the structure, then organize the homepage as hero, services, portfolio, results, testimonials, and CTA. Add no-code animations suited to each: split text on the hero, staggered reveals on services, image reveals on the portfolio, and an animated CTA. Tools like BricksFly provide agency templates and these effects together, so you build it visually.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>What should an agency homepage include?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An effective agency homepage includes a hero (what you do), a services section, a portfolio or work section (proof of capability), a results or stats section, testimonials (social proof), an about\/team section (human credibility), and a clear CTA. This flow moves visitors from awareness through trust to action, which is what an agency site is designed to do.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>What animations work best for agency websites?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Match the effect to the section: split text on the hero for a premium first impression, staggered reveals on the services grid to guide attention, image reveals on the portfolio, animated counters for results, and scroll reveals for testimonials and the CTA. Bolder effects up top, subtler ones lower down, all supporting credibility and conversion rather than distracting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Can I build an animated agency site without code?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. No-code animation tools like BricksFly let you add scroll reveals, split text, staggered effects, and animated CTAs through visual controls, no JavaScript required. You select a section or element, choose the effect, and tune the timing. This makes a premium, animated agency site achievable for agencies and freelancers without a developer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Will animation make my agency site slow?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It can if overused or paired with unoptimized images, and agency portfolios are image-heavy, so images are the main risk. Optimize every image, keep effects purposeful and quick, and test on mobile. GSAP is efficient, so a few well-chosen effects on an optimized site have minimal performance impact, while a slow site undercuts your credibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-xl-font-size\"><strong>Should I use an agency template or build from scratch?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An agency template saves significant time and provides a proven, converting structure plus the inner pages an agency site needs. Building from scratch is possible but slow. Starting from a template lets you focus on your content, work, and animation rather than structure. BricksFly includes agency-suitable templates designed for this.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your agency&#8217;s website is the most important pitch you&#8217;ll ever build, so learning how to build an animated agency website in Bricks&hellip;<\/p>\n","protected":false},"author":1,"featured_media":273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,8,7],"tags":[13,9,10],"class_list":["post-267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-bricks-builder","category-wordpress","tag-animation","tag-bricks-builder","tag-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Build an Animated Agency Website in Bricks<\/title>\n<meta name=\"description\" content=\"Learn how to build an animated agency website in Bricks Builder, homepage structure, service sections, portfolio, testimonials, and no-code scroll animation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build an Animated Agency Website in Bricks\" \/>\n<meta property=\"og:description\" content=\"Learn how to build an animated agency website in Bricks Builder, homepage structure, service sections, portfolio, testimonials, and no-code scroll animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/\" \/>\n<meta property=\"og:site_name\" content=\"Bricks Fly\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-13T10:25:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-14T05:28:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1774\" \/>\n\t<meta property=\"og:image:height\" content=\"887\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Habibur Rahman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Habibur Rahman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/\"},\"author\":{\"name\":\"Habibur Rahman\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#\\\/schema\\\/person\\\/a5488973e136c695f41d6ab802340643\"},\"headline\":\"How to Build Animated Agency Websites in Bricks\",\"datePublished\":\"2026-07-13T10:25:56+00:00\",\"dateModified\":\"2026-07-14T05:28:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/\"},\"wordCount\":2226,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp\",\"keywords\":[\"Animation\",\"Bricks builder\",\"WordPress\"],\"articleSection\":[\"Animation\",\"Bricks Builder\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/\",\"url\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/\",\"name\":\"How to Build an Animated Agency Website in Bricks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp\",\"datePublished\":\"2026-07-13T10:25:56+00:00\",\"dateModified\":\"2026-07-14T05:28:01+00:00\",\"description\":\"Learn how to build an animated agency website in Bricks Builder, homepage structure, service sections, portfolio, testimonials, and no-code scroll animation.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp\",\"contentUrl\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp\",\"width\":1774,\"height\":887,\"caption\":\"How to build animated agency websites in bricks\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/animated-agency-website-bricks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build Animated Agency Websites in Bricks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/\",\"name\":\"Bricks Fly\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#organization\",\"name\":\"Bricks Fly\",\"url\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Bricks-fly-logo.webp\",\"contentUrl\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Bricks-fly-logo.webp\",\"width\":300,\"height\":82,\"caption\":\"Bricks Fly\"},\"image\":{\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/#\\\/schema\\\/person\\\/a5488973e136c695f41d6ab802340643\",\"name\":\"Habibur Rahman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8aa1f62edcf8c1cf600260f03db31643c79e58e736506d533e33853c46c17b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8aa1f62edcf8c1cf600260f03db31643c79e58e736506d533e33853c46c17b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8aa1f62edcf8c1cf600260f03db31643c79e58e736506d533e33853c46c17b?s=96&d=mm&r=g\",\"caption\":\"Habibur Rahman\"},\"sameAs\":[\"https:\\\/\\\/bricksfly.com\\\/blog\"],\"url\":\"https:\\\/\\\/bricksfly.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build an Animated Agency Website in Bricks","description":"Learn how to build an animated agency website in Bricks Builder, homepage structure, service sections, portfolio, testimonials, and no-code scroll animation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/","og_locale":"en_US","og_type":"article","og_title":"How to Build an Animated Agency Website in Bricks","og_description":"Learn how to build an animated agency website in Bricks Builder, homepage structure, service sections, portfolio, testimonials, and no-code scroll animation.","og_url":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/","og_site_name":"Bricks Fly","article_published_time":"2026-07-13T10:25:56+00:00","article_modified_time":"2026-07-14T05:28:01+00:00","og_image":[{"width":1774,"height":887,"url":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp","type":"image\/webp"}],"author":"Habibur Rahman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Habibur Rahman","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#article","isPartOf":{"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/"},"author":{"name":"Habibur Rahman","@id":"https:\/\/bricksfly.com\/blog\/#\/schema\/person\/a5488973e136c695f41d6ab802340643"},"headline":"How to Build Animated Agency Websites in Bricks","datePublished":"2026-07-13T10:25:56+00:00","dateModified":"2026-07-14T05:28:01+00:00","mainEntityOfPage":{"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/"},"wordCount":2226,"commentCount":0,"publisher":{"@id":"https:\/\/bricksfly.com\/blog\/#organization"},"image":{"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#primaryimage"},"thumbnailUrl":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp","keywords":["Animation","Bricks builder","WordPress"],"articleSection":["Animation","Bricks Builder","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/","url":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/","name":"How to Build an Animated Agency Website in Bricks","isPartOf":{"@id":"https:\/\/bricksfly.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#primaryimage"},"image":{"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#primaryimage"},"thumbnailUrl":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp","datePublished":"2026-07-13T10:25:56+00:00","dateModified":"2026-07-14T05:28:01+00:00","description":"Learn how to build an animated agency website in Bricks Builder, homepage structure, service sections, portfolio, testimonials, and no-code scroll animation.","breadcrumb":{"@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#primaryimage","url":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp","contentUrl":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/07\/How-to-Build-Animated-Agency-Websites-in-Bricks.webp","width":1774,"height":887,"caption":"How to build animated agency websites in bricks"},{"@type":"BreadcrumbList","@id":"https:\/\/bricksfly.com\/blog\/animated-agency-website-bricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bricksfly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build Animated Agency Websites in Bricks"}]},{"@type":"WebSite","@id":"https:\/\/bricksfly.com\/blog\/#website","url":"https:\/\/bricksfly.com\/blog\/","name":"Bricks Fly","description":"","publisher":{"@id":"https:\/\/bricksfly.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bricksfly.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bricksfly.com\/blog\/#organization","name":"Bricks Fly","url":"https:\/\/bricksfly.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bricksfly.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/06\/Bricks-fly-logo.webp","contentUrl":"https:\/\/bricksfly.com\/blog\/wp-content\/uploads\/2026\/06\/Bricks-fly-logo.webp","width":300,"height":82,"caption":"Bricks Fly"},"image":{"@id":"https:\/\/bricksfly.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/bricksfly.com\/blog\/#\/schema\/person\/a5488973e136c695f41d6ab802340643","name":"Habibur Rahman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ba8aa1f62edcf8c1cf600260f03db31643c79e58e736506d533e33853c46c17b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ba8aa1f62edcf8c1cf600260f03db31643c79e58e736506d533e33853c46c17b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8aa1f62edcf8c1cf600260f03db31643c79e58e736506d533e33853c46c17b?s=96&d=mm&r=g","caption":"Habibur Rahman"},"sameAs":["https:\/\/bricksfly.com\/blog"],"url":"https:\/\/bricksfly.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":5,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions\/282"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/media\/273"}],"wp:attachment":[{"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bricksfly.com\/blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}