[Help]: TweenNode scale changing depending on the selected index

[joaovictorcamargo]

Summary

Hey, I'm struggling to achieve a specific behavior, and I was wondering if I can accomplish it using the Embla API?

These images represent me navigating through the thumbnails. In this example, I have to display a maximum of 7 thumbs, with 5 of them being normal size and the smaller ones indicating that we have more to show.

Think we have to add this logic inside the tweenScale funcition and apply the tweenNode.style.transform = scale(${scale})

Can you guys please help me with that =)

const tweenScale = useCallback((emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => {

    // tweenNode.style.transform = `scale(${scale})`
}, [])

const setTweenNodes = useCallback((emblaApi: EmblaCarouselType): void => {
    tweenNodes.current = emblaApi.slideNodes().map((slideNode) => {
        const node = slideNode.querySelector('.embla-thumbs__slide__number') as HTMLElement
        return node
    })
}, [])

const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => {
    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
}, [])

useEffect(() => {
    if (!emblaApi) return

    setTweenNodes(emblaApi)
    setTweenFactor(emblaApi)
    tweenScale(emblaApi)

    emblaApi
        .on('reInit', setTweenNodes)
        .on('reInit', setTweenFactor)
        .on('reInit', tweenScale)
        .on('scroll', tweenScale)
}, [emblaApi, tweenScale])

If applicable, which variants of Embla Carousel are relevant to this question?

• 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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response