animate
<script type="module">
const animate = document.querySelector("drab-animate");
animate.triggerListener(() => animate.animateElement());
</script>
<drab-animate
animation-keyframe-from-transform="scale(1)"
animation-keyframe-50-transform="scale(0)"
animation-keyframe-to-transform="scale(1)"
animation-option-duration="1000"
animation-option-delay="100"
animation-option-easing="ease-in"
>
<button data-trigger type="button" class="button button-primary">
Animate
</button>
<div class="flex h-56 items-center justify-center pt-12">
<span data-content class="size-32 rounded-full bg-rose-700"></span>
</div>
</drab-animate>
Overview
The Animate base class provides a declarative way to use the Web Animations API through HTML attributes. The animateElement method uses these attributes and persists the final animation state. Other elements in drab extend this class to provide animations. You can also extend this class to create your own custom animated element.
Keyframes can be set via HTML attributes on the element in the form of:
<drab-animate animation-keyframe-offset-property="value"></drab-animate>
offset can be to, from, or a number.
property can be any animatable CSS property separated by dashes.
Animations options can be set:
<drab-animate animation-option-property="value"></drab-animate>
property can be duration, delay, or easing.
Extends
Extended by
Constructors
new Animate()
new Animate():
Animate
Returns
Overrides
Source
src/package/animate/index.ts:39
Properties
#listenerController
private#listenerController:AbortController
To clean up event listeners added to document when the element is removed.
Inherited from
Source
Accessors
animationOptions
getanimationOptions():KeyframeAnimationOptions
Returns
KeyframeAnimationOptions
An object containing the values of each animation-option attribute
Source
src/package/animate/index.ts:46
event
getevent(): keyofHTMLElementEventMap
Event for the trigger to execute.
For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.
Default
"click";
setevent(value):void
Parameters
• value: keyof HTMLElementEventMap
Returns
keyof HTMLElementEventMap
Source
keyframes
getkeyframes():Keyframe[]
Returns
Keyframe[]
Source
src/package/animate/index.ts:128
Methods
animateElement()
animateElement(
animateOptions):Promise<void>
Parameters
• animateOptions= undefined
animates this.content() by default
• animateOptions.element?: HTMLElement
• animateOptions.options?: KeyframeAnimationOptions
Returns
Promise<void>
Description
Animates a particular element using the web animations API.
- Disables animation if the user prefers reduced motion.
- Sets default options
- Uses the keyframes provided from
this.keyframes - Waits for the animation to complete
- Sets the start and end styles based on the first and last keyframe
Source
src/package/animate/index.ts:76
connectedCallback()
connectedCallback():
void
Called when custom element is added to the page.
Returns
void
Inherited from
Source
destroy()
destroy():
void
Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.
Returns
void
Inherited from
Source
disconnectedCallback()
disconnectedCallback():
void
Called when custom element is removed from the page.
Returns
void
Inherited from
Source
getContent()
getContent<
T>(instance):T
Type parameters
• T extends HTMLElement = HTMLElement
Parameters
• instance= undefined
The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement.
Returns
T
The element that matches the content selector.
Inherited from
Default
this.querySelector("[data-content]");
Source
getTrigger()
getTrigger<
T>():NodeListOf<T>
Type parameters
• T extends HTMLElement = HTMLElement
Returns
NodeListOf<T>
All of the elements that match the trigger selector.
Inherited from
Default
this.querySelectorAll("[data-trigger]");
Source
mount()
mount():
void
Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.
The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.
Returns
void
Inherited from
Source
safeListener()
safeListener<
K,T>(type,listener,element,options):void
Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
• K extends keyof DocumentEventMap
• T extends Window | Document | HTMLElement = HTMLElement
Parameters
• type: K
• listener
• element: T= undefined
• options: AddEventListenerOptions= {}
Returns
void
Inherited from
Source
swapContent()
swapContent(
revert,delay):void
Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.
Parameters
• revert: boolean= true
Swap back to old content
• delay: number= 800
Wait time before swapping back
Returns
void
Inherited from
Source
triggerListener()
triggerListener<
T,K>(listener,type,options?):void
Type parameters
• T extends HTMLElement
• K extends keyof HTMLElementEventMap
Parameters
• listener
Listener to attach to all of the trigger elements.
• type: K= undefined
• options?: AddEventListenerOptions
Returns
void