animate docs

Animate

Animations for Bolt Design System

Published Last updated: 2.30.0 Change log Github NPM
Twig Usage <bolt-animate in="fade-in"> ...</bolt-animate> Schema Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
initialAppearance
string hidden
  • default or hidden
in
string none
  • none , fade-in , slide-down , fade-in-slide-up , fade-in-slide-down , fade-in-slide-left , fade-in-slide-right , fade-in-fade-out
inDuration

Set in milliseconds

number 500
inDelay

Set in milliseconds

number 0
inEasing
string ease
  • ease , ease-in , ease-out , ease-in-out , linear
inOrder
number 1
idle
string none
  • none , pulse , spin , heart-beat
idleDuration

Set in milliseconds

number 500
idleDelay

Set in milliseconds

number 0
out
string none
  • none , fade-out , fade-out-slide-up , slide-up , fade-out-slide-down , fade-out-slide-left , fade-out-slide-right
outDuration

Set in milliseconds

number 350
outDelay

Set in milliseconds

number 0
outEasing
string ease
  • ease , ease-in , ease-out , ease-in-out , linear
outOrder
number 1
showMeta
boolean false
Install Install npm install @bolt/components-animate Dependencies @bolt/core-v3.x @bolt/lazy-queue

Slots

Name Required? Description
default No wrapped content to animate

Methods

Name Description
triggerAnimIn() => boolean start the in animation, will go to idle animation after
triggerAnimOut() => boolean start the out animation

Events

Name Detail Description
bolt-animate:end:in {} Indicates when the in animation concluded
bolt-animate:end:out {} Indicates when the out animation concluded

animate

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

animate build stages

Build Ins

in="none"

none


in="fade-in"

fade-in


in="slide-down"

slide-down


in="fade-in-slide-up"

fade-in-slide-up


in="fade-in-slide-down"

fade-in-slide-down


in="fade-in-slide-left"

fade-in-slide-left


in="fade-in-slide-right"

fade-in-slide-right


in="fade-in-fade-out"

fade-in-fade-out


Build Outs

out="none"

none


out="fade-out"

fade-out


out="fade-out-slide-up"

fade-out-slide-up


out="slide-up"

slide-up


out="fade-out-slide-down"

fade-out-slide-down


out="fade-out-slide-left"

fade-out-slide-left


out="fade-out-slide-right"

fade-out-slide-right


editor docs

Editor

Next Generation live editor for Bolt Web Components

Published Last updated: 2.30.0 Change log Github NPM
Twig Usage {% set content %} <bolt-text>Hello World!</bolt-text> {% endset %} {% include '@bolt-components-editor/editor.twig' with { styles: ['/build/bolt-global.css'], scripts: ['/build/bolt-global.js'], content: content, } only %} Schema Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
content *

HTML content to edit

string
styles *

URL paths to CSS files that the editable content requires

array
scripts *

URL paths to JS files that the editable content requires

array
id

ID for this content. Useful for saving back to a data store like Drupal by passing in the paragraph ID. ID emitted in save event.

string
Install Install npm install @bolt/components-editor Dependencies @bolt/core-v3.x @bolt/lazy-queue detect-browser grapesjs param-case

editor simple

Edit
This is a Button; click "Edit" above to edit me

editor blockquote

Edit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

editor modal

Edit
This is a Button triggering an on-page Modal This is a Link triggering an on-page Modal CTA Text
Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
    • Chapters
    • descriptions off, selected
    • captions off, selected
        Edit
        How Pega technology resolves Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        micro journey docs

        Micro Journeys

        A collection of Web Components for animated storytelling

        See a demo of the Micro Journeys with Editor in a full page

        character docs

        Character Docs

        Usage

        <bolt-character size="small"></bolt-character>

        Schema

        Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
        Prop Name Description Type Default Value Option(s)
        attributes

        A Drupal-style attributes object with extra attributes to append to this component.

        object
        size *

        Character Size.

        string small
        • small , medium , large
        characterImage

        Pre-defined package image.

        string customer-happy
        • customer-happy , customer-neutral , customer-sad , customer-surprise , pega-rep , u-comm-plus , custom
        characterCustomUrl

        URL of a custom image.

        string https://www.fillmurray.com/g/200/200
        useIcon

        Use a bolt-icon in place of an image Url.

        boolean false
        constrainBottomSlot

        Constrain the bottom slot to the width of the character. Used when right or left slots overflow character height and encroach on bottom slot.

        boolean false
        addBackgroundPadding

        Add padding around the character equalling the width/height of the background. Collapses on mobile.

        boolean false

        Slots

        Name Requred? Description
        top No
        right No
        bottom No
        left No

        character

        Edit
        Slot: top Slot: left Slot: right Slot: bottom

        character kitchen sink

        Toggle light/dark theme Trigger Characters Animate In

        Official Editor Starters

        Company CTA Text

        Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer

        Uh oh!

        To avoid costly calls to your service center (and keeping customers happy), you ned to stay one step ahead. That's why Pega's real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It's not mind-reading. It's signals

        Why is my bill so high? Let me check.

        Customer billing view I am text

        Uh oh!

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi atque consectetur delectus deserunt eaque exercitationem fugiat mollitia nobis nostrum, odit placeat, quae repudiandae, saepe sequi sint tempore ut velit. CTA text

        Test constrainBottomSlot, overlapping bottom and right content can't overlap

        Very long. Lorem ipsem text not too long.

        Bill is due!

        Bill is due!

        Bill is due!

        Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer

        I'm a small character

        Slot: left Slot: right Slot: bottom

        I'm a medium character

        I'm a medium character

        I'm a medium character

        I'm a large character

        Bill is due!

        I'm a large character. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Bill is due! Lots more text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        I'm a large character

        Bill is due!

        lorem

        Bill is due!

        Bill is due!

        Bill is due!

        Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer

        Why is my bill so high? Let me check.

        Customer billing view

        Corporis expedita labore

        Lorem ipsum dolor sit amet
        Company

        You are about to reach your monthly data limit...

        Customer

        Customer is 79% likely to call about their bill.

        Company

        Offer to waive late fee.

        Customer

        You have a data roaming charge and a late fee. Would you like to waive the late fee?

        Agent view of billing charges

        Why is my bill so high?

        Thanks for being a valued customer!

        Thanks so much for waiving my late fee!

        lorem

        Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer
        Company CTA Text

        Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer

        Uh oh!

        To avoid costly calls to your service center (and keeping customers happy), you ned to stay one step ahead. That's why Pega's real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It's not mind-reading. It's signals

        Why is my bill so high? Let me check.

        Customer billing view I am text

        Uh oh!

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi atque consectetur delectus deserunt eaque exercitationem fugiat mollitia nobis nostrum, odit placeat, quae repudiandae, saepe sequi sint tempore ut velit. CTA text lorem

        Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Short text.

        Customer

        Not very long. Lorem ipsum dolor.

        lorem

        Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer
        lorem

        Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer
        lorem

        Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Customer

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        connection docs

        Connection Docs

        <bolt-connection size="small"></bolt-connection>
        Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
        Prop Name Description Type Default Value Option(s)
        speed

        Speed of the animation, typically rotation.

        string 1000
        animType

        Type of predefined animated SVG to use.

        string connectionBand
        • connectionBand or tripleConnectionBand
        direction

        Direction of animation, currently only available on Connection Band

        string left
        • left or right

        connection

        Edit
        top bottom

        status dialogue bar docs

        Status Dialogue Bar Docs

        <bolt-status-dialolgue-bar size="small"></bolt-status-dialolgue-bar>
        Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
        Prop Name Description Type Default Value Option(s)
        attributes

        A Drupal-style attributes object with extra attributes to append to this component.

        object
        iconName

        Icon name.

        string mobility
        • -none- , academy , add , add-open , add-solid , agile , app-development , app-exchange , arrow-left , asset-data , asset-infographic , asset-interactive , asset-link , asset-media , asset-podcast , asset-presentation , asset-text , asset-video , bolt-logo-colored , brand-meteor , brand-molecule , brand-operations , brand-orbit , brand-triangle , calendar , careers , case-management , chart-bar , check , check-circle , check-solid , chevron-down , chevron-left , chevron-right , chevron-up , close , close-circled , close-open , close-solid , cloud , co-browse , collaboration , communications , copy-to-clipboard , credit-card , customer-decision-hub , customer-onboarding , customer-service , data-integrations , discussions , documentation , dollar-open , download , email , energy , entertainment , exclamation , exit-full-screen , external-link , eye , eye-off , face-happy , face-sad , facebook , facebook-solid , field-service , field-service-gray , file-small , filter , financial , full-screen , github , global , government , healthcare , heart , hospitality , ideas , industries , info-open , info-solid , insurance , integration , intelligent-virtual-assistant , java , knowledgebase , launchpad , life-sciences , linkedin , linkedin-solid , list , lock , manufacturing , map-pin , map-pin-solid , marketing , marketing-gray , menu , minus-open , minus-solid , mobility , more , omni-channel , partners , pencil , platform , podcast , print , product , product-delivery , questions , refresh , reply , reporting , retail , robo-auto , sales-automation , scalability , search , share , star-solid , support , system-admin , thumbs-up-open , time-open , training , transportation , trash , twitter , twitter-solid , unlock , upload , user , user-interface , video , vision , warning , watch , workforce-intelligence , world-open , youtube-solid
        isAlertMessage

        Is this an alert message? Changes it to error red.

        boolean false
        dialogueArrowDirection

        Direction of the dialogue arrow direction.

        string none
        • up , down , left , right , none
        boxFloatDirection

        The direction in which the dialog box should be floated given extra space in container if no arrow dialog arrow direction is given.

        string center
        • left , right , up , down , center

        status dialogue bar

        Edit

        Hey now!

        Bill almost due

        Bill almost due

        Bill almost due!! Take action now before this text wraps to another line.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolores fuga in ipsum minus modi nihil nulla odit recusandae sapiente! Aspernatur inventore minima nobis odio reprehenderit? Aliquam laudantium quos repudiandae.

        Up Arrow

        Down Arrow

        Left Arrow

        Right Arrow

        icon group docs

        Icon Group Docs

        <bolt-icon-group icon-one-name="eye" icon-two-name="eye" icon-three-name="eye" icon-color="teal"></bolt-icon-group>

        icon group

        Edit
        Horizontal Icon Group Vertical Icon Group

        micro journeys solo

        Toggle light/dark theme
        Edit
        How Pega technology resolves

        Simple Steps


        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        micro journeys

        Toggle light/dark theme
        Edit
        How Pega technology resolves Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        Why is my bill so high? Let me check.

        Customer billing view
        If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

        Customer is 79% likely to call about their bill.

        Company

        Offer to waive late fee.

        Customer
        Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

        You have a data roaming charge and a late fee. Would you like to waive the late fee?

        Agent view of billing charges

        Why is my bill so high?

        If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

        Thanks for being a valued customer!

        Thanks so much for waiving my late fee!

        When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
        Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
        Explore our industry-leading software
        Learn more about intelligent guidance
        Sign up for an upcoming demo

        You have a data roaming charge and a late fee. Would you like to waive the late fee?

        Agent view of billing charges

        Why is my bill so high?

        If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

        Thanks for being a valued customer!

        Thanks so much for waiving my late fee!

        When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
        Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        Why is my bill so high? Let me check.

        Customer billing view
        If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

        Customer is 79% likely to call about their bill.

        Company

        Offer to waive late fee.

        Customer
        Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
        Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
        Explore our industry-leading software
        Learn more about intelligent guidance
        Sign up for an upcoming demo

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.
        Toggle light/dark theme
        Edit
        How Pega technology resolves Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        Why is my bill so high? Let me check.

        Customer billing view
        If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

        Customer is 79% likely to call about their bill.

        Company

        Offer to waive late fee.

        Customer
        Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

        You have a data roaming charge and a late fee. Would you like to waive the late fee?

        Agent view of billing charges

        Why is my bill so high?

        If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

        Thanks for being a valued customer!

        Thanks so much for waiving my late fee!

        When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
        Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
        Explore our industry-leading software
        Learn more about intelligent guidance
        Sign up for an upcoming demo

        You have a data roaming charge and a late fee. Would you like to waive the late fee?

        Agent view of billing charges

        Why is my bill so high?

        If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

        Thanks for being a valued customer!

        Thanks so much for waiving my late fee!

        When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half
        Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        Why is my bill so high? Let me check.

        Customer billing view
        If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

        Customer is 79% likely to call about their bill.

        Company

        Offer to waive late fee.

        Customer
        Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action
        Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
        Explore our industry-leading software
        Learn more about intelligent guidance
        Sign up for an upcoming demo

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.
        How Pega technology resolves Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        step 1 demo

        Toggle light/dark theme
        Edit
        Company

        You are about to reach your monthly data limit...

        Customer
        To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        step 2 demo

        Toggle light/dark theme
        Edit

        Why is my bill so high? Let me check.

        Customer billing view
        If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        step 3 demo

        Toggle light/dark theme
        Edit

        Customer is 79% likely to call about their bill.

        Company

        Offer to waive late fee.

        Customer
        Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        step 4 demo

        Toggle light/dark theme
        Edit

        You have a data roaming charge and a late fee. Would you like to waive the late fee?

        Agent view of billing charges

        Why is my bill so high?

        If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        step 5 demo

        Toggle light/dark theme
        Edit

        Thanks for being a valued customer!

        Thanks so much for waiving my late fee!

        When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half

        Shadow DOM – yes:☝️ no:👇

        Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.

        svg animations docs

        svg animations

        SVG Animations

        Triple Band, Left

        Triple Band, Right

        Connection Band, Right

        Radar

        Orbit

        Automation

        SVG Animations- Dark Versions

        Automation

        Orbit

        Radar Dark

        Connection Band Left