[Feat]: Initialize plugins before starting transition

[teleskop150750]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

Currently plugins are initialized after the transition starts. This causes jumps, for example when updating the state with media queries

Link

In my fork I placed the initialization at the beginning

Link

Example of use

I use a simple plugin called Table. It allows you to have a list of synced containers.

export type OptionsType = CreateOptionsType<{
    row: string
}>

const defaultOptions: OptionsType = {
    active: true,
    breakpoints: {},
    row: '.embla__container',
}

export type TableType = CreatePluginType<{}, OptionsType>

export type TableOptionsType = TableType['options']

export function Table(userOptions: TableOptionsType = {}): TableType {
    function init(emblaApiInstance: EmblaCarouselType, optionsHandler: OptionsHandlerType): void {
        const { mergeOptions } = optionsHandler
        const allOptions = mergeOptions(defaultOptions, userOptions)
        const $root = emblaApiInstance.rootNode()

        const $rows = [...$root.querySelectorAll<HTMLElement>(allOptions.row)]

        const engine = emblaApiInstance.internalEngine()
        engine.translate = useTranslate(engine.axis, $rows)
    }

    function destroy(): void {}

    const self: TableType = {
        name: 'table',
        options: {},
        init,
        destroy,
    }
    return self
}


export function useTranslate(axis: AxisType, $containers: HTMLElement[]) {
    const translate = axis.scroll === 'x' ? x : y
    let disabled = false

    const styles: CSSStyleDeclaration[] = []

    for (const $container of $containers) {
        styles.push($container.style)
    }


    function x(n: number): string {
        return `translate3d(${n}px,0px,0px)`
    }

    function y(n: number): string {
        return `translate3d(0px,${n}px,0px)`
    }

    function to(target: number): void {
        if (disabled) return

        for (const style of styles) {
            style.transform = translate(axis.direction(target))
        }
    }
 
    function toggleActive(active: boolean): void {
        disabled = !active
    }

    function clear(): void {
        if (disabled) return

        for (const $container of $containers) {
            $container.style.transform = ''
            if (!$container.getAttribute('style')) $container.removeAttribute('style')
        }
    }

    const self = {
        to,
        toggleActive,
        clear,
    } as const

    return self
}

2025-05-16.13-52-17.mp4

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests