Add Beautiful Animations to WordPress Blocks with Ollie Pro 🔗 **Source:** [Add Beautiful Animations to WordPress Blocks with Ollie Pro](https://www.youtube.com/watch?v=pwDBC4OWVc4) > [!note]+ Document Notes > tags: [WordPress, Block Editor, Animations] > author: [MISSING] > source: YouTube > reference: [https://www.youtube.com/watch?v=pwDBC4OWVc4] > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: Add Beautiful Animations to WordPress Blocks with Ollie Pro > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Document editor integration steps — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=3 #xref - [H2] Create a timing presets catalog — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=98 #articleseed - [H3] Draft motion usage guidelines — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=191 #addendum - [H4] Publish column sequencing recipe — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=368 #articleseed - [H5] Standardize sitewide animation presets — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=465 #xref - [H6] Ship “scale on hover” cards demo — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=664 #share - [H7] Add “use sparingly” checklist — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=664 #aphorisms - [H8] Validate performance and a11y claims — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=660 #xref - [H9] Map presets to WordPress patterns — context/https://www.youtube.com/watch?v=pwDBC4OWVc4&t=465 #articleseed ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - The video introduces Ollie Pro’s Animation Designer. [YouTube](https://www.youtube.com/watch?v=pwDBC4OWVc4) - It integrates into the block editor UI. - It adds timing, trigger, and distance controls. - Presets enable consistent animations across pages. - Cascading animations highlight content in columns and grids. - Bottom line: Use motion purposefully with performance in mind. ## 📖 Main Content - The tool lives in block settings and toolbar. This reduces context switching. [YouTube](https://www.youtube.com/watch?v=pwDBC4OWVc4) - Designers adjust duration, delay, and distance for effects. - Triggers include on load and on scroll. - Column sequencing creates staggered motion for clarity. - Presets enable reuse and global edits for consistency. - Scale-on-hover supports interactive card patterns. - The presenter stresses restraint and clarity in motion use. - Note: “performant” and “accessible” claims need verification in varied themes. - WordPress block editor supports extensibility for such features. See docs. <https://developer.wordpress.org/block-editor/> - Respect users’ motion preferences per WCAG 2.2 guidance. <https://www.w3.org/TR/WCAG22/> ### 🗒️ Notes #### ⏱️ [00:03](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=3) Editor integration ### [H1] Animation designer integrates into block editor > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “brings beautiful, performant animations directly into the WordPress block editor” Integration reduces plugin sprawl and CSS hacking. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=3) #xref ID:rw_[MISSING] #### ⏱️ [01:38](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=98) Curated styles ### [H2] Curated animations promote clean design > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “We don't have a ton of animations and that's by design.” Limited sets guide tasteful motion defaults. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=191) #articleseed ID:rw_[MISSING] #### ⏱️ [03:11](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=191) Controls ### [H3] Timing and distance controls shape effects > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “change the duration… delay… for movement… we have a distance option.” Controls enable consistent, testable motion patterns. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=281) #xref ID:rw_[MISSING] #### ⏱️ [04:41](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=281) Columns ### [H4] Columns support sequential cascading animations > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “animate columns sequentially… nice cascading effect” Staggering helps scan content without overwhelm. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=368) #articleseed ID:rw_[MISSING] #### ⏱️ [07:45](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=465) Presets ### [H5] Presets enable reusable motion design sitewide > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “save current settings as presets… updates every single place” Presets reduce toil and enforce consistency. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=465) #xref ID:rw_[MISSING] #### ⏱️ [09:17](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=557) Cards ### [H6] Scale-on-hover enhances card interactivity > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “scale on hover… when you hover over this item” Use sparingly to reduce motion fatigue. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=664) #share ID:rw_[MISSING] #### ⏱️ [11:04](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=664) Restraint ### [H7] Presenter stresses using motion sparingly > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “try not to overuse it… too much… can… distract the user” Adopt motion rules tied to user tasks. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=664) #aphorisms ID:rw_[MISSING] #### ⏱️ [11:36](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=696) Claims ### [H8] Video claims performance and accessibility > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “These animations are super performant… They’re accessible.” Validate in lab and with real users. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=696) #xref ID:rw_[MISSING] #### ⏱️ [12:07](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=727) Ecosystem ### [H9] Ollie Pro extends the block editor’s capabilities > [!quote] [Add Beautiful Animations…](https://www.youtube.com/watch?v=pwDBC4OWVc4) > “powerful extensions… bring a professional level of site building” Assess compatibility across themes and patterns. [view highlight](https://www.youtube.com/watch?v=pwDBC4OWVc4&t=727) #articleseed ID:rw_[MISSING] ## 📚 References - WordPress Block Editor Developer Docs: https://developer.wordpress.org/block-editor/ - WCAG 2.2 Overview: https://www.w3.org/TR/WCAG22/ - Video: Add Beautiful Animations to WordPress Blocks with Ollie Pro: https://www.youtube.com/watch?v=pwDBC4OWVc4 ## 🗣️ Paraphrase - The presenter introduces Animation Designer and shows editor integration. - They demonstrate controls, sequencing, presets, and card hovers. ## 📰 Newsletter - Motion can help readers scan content. Ollie Pro’s Animation Designer adds tasteful effects inside the block editor. You get sequencing for columns, reusable presets, and hovers for cards. Keep motion purposeful and respect `prefers-reduced-motion`. Watch the walkthrough and share feedback from your theme stack. Source: [YouTube](https://www.youtube.com/watch?v=pwDBC4OWVc4). Docs: <https://developer.wordpress.org/block-editor/> • WCAG: <https://www.w3.org/TR/WCAG22/>. ## ✅ Action Items #### DevRel - Record a 5-minute demo on presets and sequencing. - Publish a “motion do’s and don’ts” checklist. - Add sample repos showing preset JSON export patterns. - Track talk-to-trial conversions for Ollie Pro videos. #### OSPO - Define motion contribution guidelines for themes. - Add a review step for `prefers-reduced-motion`. - Establish performance budgets for animation scripts. #### Community - Host a motion design clinic for block themes. - Pair new contributors on accessibility testing runs. #### WordPress - Documentation: add examples for animation presets. - Themes: include motion tokens and timing scales. - Accessibility: add reduced-motion test cases to CI. - Playground: ship a motion-testing sandbox recipe. #### The WPCC - Fund a microgrant for motion a11y audits. - Publish a transparent report on audit outcomes. ### FAIR - Add provenance notes for animation presets in exports. - Include policy language for motion performance SLOs. ## 🧪 Hypotheses - Presets reduce animation setup time by at least 40%. - Sequenced columns improve section comprehension metrics. - Reduced-motion support lowers bounce on sensitive pages. - Curated styles decrease reported distraction incidents. ### 📊 Methodology - Run time-on-task studies for setup with and without presets. - A/B test sequenced versus static columns on identical content. - Capture analytics under `prefers-reduced-motion` conditions. - Survey users on clarity, distraction, and perceived polish. ### ❓ Questions - How do presets export and import across sites? - What is the default easing and can teams customize it? - How do themes override timing scales safely? ### 🔮 Future Research - Measure motion’s effect on conversion in WordPress stores. - Build a standard motion token spec for themes. - Explore tooling for automatic reduced-motion fallbacks. ### 💡 Implications - Teams can standardize motion without heavy page builders. - Accessibility must guide defaults and presets. - Consistent motion language strengthens brand and UX. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch–Kincaid Grade ≈ 9. #### 👀 Visual learners - Present: on-screen editor demos. - Improve: labeled diagrams of timing scales. #### 🔊 Aural learners - Present: narrated walkthrough. - Improve: 2-minute audio recap with key tips. #### 🗣️ Verbal learners - Present: concise labels and menus. - Improve: glossary for motion terms and triggers. #### 🧩 Kinesthetic learners - Present: live editor steps. - Improve: guided labs with preset challenges. #### 🧠 Logical learners - Present: parameter controls and options. - Improve: decision trees for effect selection. #### 🧑‍🤝‍🧑 Social learners - Present: sharable presets concept. - Improve: cohort reviews and critique sessions. #### 🧘‍♀️ Solitary learners - Present: replayable video. - Improve: printable quickstart and checklists. #### 🌿 Naturalistic learners - Present: none explicit. - Improve: sustainable performance guidance for motion. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: standard YouTube player semantics. - Improve: detailed captions and alt text for UI changes. #### Keyboard navigation - Present: editor supports keyboard traversal. - Improve: ensure focus states on animated elements. #### Contrast and readability - Present: theme dependent. - Improve: document minimum contrast for animated content. #### Text resizing and reflow - Present: responsive editor canvas. - Improve: test animations at 200% zoom and reflow. #### Media and captions - Present: auto-captions available. - Improve: human-edited captions and downloadable transcript. #### Forms and interactions - Present: N/A for video. - Improve: provide accessible feedback form for users. #### Standards reference - Map improvements to WCAG 2.2 AA criteria. <https://www.w3.org/TR/WCAG22/> ### 🌍 DEIB Assessment #### Cultural breadth - Present: general global audience. - Improve: include multilingual captions and examples. #### Inclusive language - Present: neutral and clear. - Improve: define motion jargon early. #### Neurodiversity support - Present: short, focused segments. - Improve: predictable patterns and optional reduced motion. #### Representation - Present: single presenter. - Improve: feature diverse creators using presets. #### Psychological safety - Present: supportive tone. - Improve: publish moderation and feedback guidelines. ### ✅ Logical Validity #### Strong reasoning - Presets plausibly improve consistency ([H5]). Reuse supports quality control. - Restraint reduces distraction risk ([H7]). This aligns with usability research. - Sequencing can guide attention ([H4]). Staggering often aids scanning. #### Fallacies - “Super performant” claim lacks quantified evidence ([H8]). Provide benchmarks and contexts. - “Accessible” claim needs scope definition ([H8]). Specify assistive tech coverage and tests. #### Tone of voice - Instructional and pragmatic. Marketing notes appear but remain bounded. ### 🛡️ DARVO Analysis - Deny: none noted. - Attack: none noted. - Reverse victim/offender: none noted. - The content focuses on features and guidance. Tag Coverage — #articleseed: 3 • #xref: 4 • #share: 1 • #bmf: 0 • #addendum: 1 ## 🎯 Conclusion - Ollie Pro’s Animation Designer fits naturally into the editor. - Presets and sequencing improve consistency and clarity. - Teams should adopt motion guidelines and test reduced-motion states. - Validate performance and accessibility with transparent benchmarks. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. <!-- deep-read:sections end --> ## 📺 Video ![](https://www.youtube.com/watch?v=pwDBC4OWVc4) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=pwDBC4OWVc4)* **[00:00]** Hey folks, Mike here from Ali and today I want to show you something that's going to help bring your WordPress websites to life and that's animation designer. One of the powerful new extensions in Ali Pro. If you've ever wanted to add smooth, professional animations to your WordPress site, you know it usually means installing a bulky animation plugin or wrestling with custom CSS or hoping your page builder has decent animation controls built in. And the problem is is that most of these solutions, they often feel kind of **[00:30]** bloated and overly complicated when it really just doesn't need to be. As part of our recent release of Ali Pro extensions, we introduced animation designer, which brings beautiful, performant animations directly into the WordPress block editor in a way that feels like they've always been there. It blends seamlessly into the native interface with clean, intuitive controls right in your block settings where they belong. You also get fine-tune control over duration, delay, distance, and whether your animations trigger on page load or when users scroll them into **[01:02]** view. And for container blocks like grids and columns, you can create beautiful cascade effects where child elements animate one after another, guiding your visitor's eye exactly where you want it. But what really makes this powerful is the preset system that lets you save your favorite animation combinations and reuse them across your entire site for consistent motion design. Let's hop into WordPress and see just how easy it is to add professional animations to your blocks with animation designer. All right, here I am in the **[01:33]** WordPress site editor and I've already got a page designed with some Ali Pro patterns from the agency collection and I was able to just one click and add these beautiful designs that we can now work with. But I chose this um design because it has some really nice columns and grids and I think that will be helpful for showing off some of the Ali Pro animations. So here's what we're going to do. I'm going to go ahead and start uh pretty simple, very high level, and let's animate a full section. So, I'm going to click on this um services **[02:05]** section here in the sidebar. And there's a few ways we can add an animation. So, I could come over here to the block sidebar and click the styles tab and scroll all the way down to the bottom where we've appended our animation feature and I can start adding some animations here. or uh much quicker way is a animation uh option on the toolbar that I can click and I can simply click add animation and let me show you what happens if I'm not in that tab. If I click this and add animation, it **[02:36]** switches over to that tab, scrolls all the way down and we can uh see the animation panel down here at the bottom. So, let's go ahead and add an animation. You can see we have a curated list of animation styles here. We don't have a ton of animations and that's by design. We want you to have some really nice uh defaults to work with and to keep your site not super distracting, keep it nice and clean and um professional looking. And that's what these animations are meant to do. So, let's go ahead and uh **[03:07]** click the first one here. And you can see we can preview these as we select them. See the different styles. Fade and right. Zoom where we kind of zoom in. a pulse where we kind of zoom in and out and we even have a scale on hover effect. And you can see uh that one we'll we'll preview when we work with some card styles. So let's just go ahead and um stick with this uh fade in one first. And you'll see we have a few different options down here. I can change the duration, how long that **[03:38]** animation takes, or delay. I can set an animation delay so it starts after, you know, uh, a few seconds or or whatever you want. But let's go ahead and check out the front end. And you see if I refresh, I get the same uh, animation I had in the editor. So, it's just really nice subtle animation. Now, personally, I don't love animating full sections like this because I feel like it's maybe a little distracting, a little visual noise. Uh, I just like to use animations **[04:09]** a little more purposefully and sort of to draw users attention to a certain area, certain features, uh, etc. So, I like to kind of dial it in a little bit more. So, let's go ahead and remove that. And in order to remove that, I just come down here and I, uh, click this X. It says clear animation. And that's gone. And I can save it. All right. Let's look at this, uh, column section. I think this is a really cool way of showing off what's possible here. So, uh, what I'm going to do is, uh, I want to add an animation to the overall **[04:41]** columns section, not not these individual blocks in here. So, I'm going to select that. And in Ali Pro, we have a shortcut to select the parent block. So, if I hit command shift up, you can see I've selected the uh, the text uh, group. If I do it again, you can see I've selected the column. And if I do it again, now I've selected the columns block that contains all of this stuff. So, let's go ahead and add an animation. And just as I showed you earlier, I can use this button here. Click add animation. **[05:12]** And we can look through a few of them. I think I want to use this fade in up. And uh you can see we have the duration and delay options. And for um animations that have movement left, right, or up or down, we have a distance option. And this lets us determine how far the item is going to animate. Uh so you can go all the way up to 200 pixels and that'll generally give you more than enough uh movement debatably too much. Uh but it's in there if you want to and **[05:43]** there are use cases for it. So I'm just going to go ahead and leave that at like 35 and let's go ahead and look at what that looks like. All right. So you see we have a nice clean fade in up effect exactly how we designed it. Uh but we can go a few steps further and I've added a really cool effect in here. And if you scroll down to the bottom, you'll see animate columns sequentially. And what this does is if we save it and come to the front end again and refresh, you can see it it fades in the items within the columns individually. So we get this **[06:14]** nice cascading effect where this one scrolls uh fades in and then this one and then this one with a small offset. And we can even change the offset here and we can kind of make this uh you know a little bit longer, a little bit faster. If I come over here, you can see it's got a nice kind of slow fade in. I personally like it a little faster, so I'll probably dial that back down to 0 2. And uh so yeah, that's a really cool feature. It kind of adds a nice elegance and kind of a professional feel to your site. So that's that. But we can even **[06:47]** take this a step further because, you know, you're going to want to add animations to more than just this one section. You I have columns down the page. I have this grid that I want to um maybe add an animation to. And it would be painful to add these settings to every single block uh not just on this page, but across your site. And so we've built a feature in here called presets. And what that does is it lets you take all of these settings that we've just dialed in. We can save current settings **[07:20]** as presets. So, let's just call this um grid animate and click save. And you can see we have a animation preset selector now and it's selected grid animate. And if I save that, there's nothing different on the front end. It's still that really cool effect. But what I can do now is I can take that preset and I can come down here and select this grid. And when I click this animate button on the toolbar, there it is. Animation preset. So, we have the preset we just **[07:51]** saved. And if I click that and then save the page, come to the front end. Now, I can see that I'm applying that same effect across multiple sections. And this is really cool because this means that I can animate I can design an animation in one place and I can use this not just on this page, I can use this on a dozen pages and I get that that very consistent design across a bunch of pages. And then if I ever want to come in and and customize **[08:22]** this uh animation, I can click edit grid animate. It comes over here and I can dial this in and and change the duration. Um maybe I want to make it a little faster. And then I come over here and this is going to update it every single place that I have this animation used. So it's almost like global animations, which is really cool because it creates a sense of consistency across your site. You know, that's a big thing with Ali and Ali Pro is creating design consistency for you. So, you have really **[08:52]** beautiful predictable results. And when you throw in animations, uh, and you have that kind of, you know, beautiful consistent motion design, you can really feel it as you're browsing the site, it's it actually matters a lot. So that is uh and we can come down here again and there's there's all kinds of I can add it here to this grid and um I'm going to get some nice consistent results across it. So that's preset super powerful. Now I'm going to show you one more thing that I think is a **[09:23]** cool use case for this. Um, I'm going to come over here and let's add a let's add a background to this and some padding like this. Kind of make it more of a card style. Take a look at that on the front end. Uh, so we have this nice um kind of card style. And uh, one thing I see a lot of people do with these is um, let's actually remove **[09:56]** the animation here. And um what we can do is we can also animate individual items like this column. And one thing one u animation we have in here that works well for that is if come down here scale on hover. And what that does is when you hover over this item, we're going to get a scale effect. So let's go ahead and save it and check it out. And you can see you have this like this scale up effect on hover. And that's really cool when you um have a like a **[10:28]** grid of cards. So, let's go ahead and save this as a preset as well. Let's make it a little faster. And we'll call this card hover. Like that. And then we can add that here. Card hover. And here card hover. Save. And uh of course we don't have the same styles on here, but you can see we get that like really cool effect. um across this grid. And again, this is um you know, just a way of **[10:58]** drawing some attention and just creating making your your content a little more lively and engaging. You know, try not to overuse it. Um you want to use these things sparingly because too much of it can really kind of um distract the user. But um the way we've built this this and um the the kind of the presets and the everything kind of wrapped around Ali Pro and the design uh system that we have in there really gives you some beautiful results out of the box and um just makes your **[11:30]** websites that much better, that much faster. These animations are super performant. We've really dialed them in. They're accessible. Um, and we're really just uh take this thing really seriously to make sure that you're getting the best possible website. All right, folks. That's the Ali Pro Animations feature. I hope you check it out soon. We're already seeing users create some really beautiful websites with these pro extensions combined with the Ali design system. If you're not an Ali Pro member yet, I encourage you to check it out. It's quickly becoming the go-to way to **[12:02]** build beautiful, blazing fast websites in the WordPress site editor. We have a library of hundreds of pixel perfect patterns and page layouts. We have a setup wizard that helps you create site in seconds. And now we have these powerful extensions like animation designer and menu designer that bring a professional level of site building to the block editor. All right, folks. That's it for this video. I'll see you next time.