FramerX KeepGrowing interaction

KeepGrowing.tsx

import { Data, animate, Override, Animatable } from "framer"

const STABLE_COLOR = '#FFF'
const GROWING_COLOR = '#F00'

let isGrowing = false

const data = Data({ 
    backgroundColor: Animatable(STABLE_COLOR),
    likeScale: Animatable(1)
})

const keepGrowing = () => {
    if (isGrowing) {
        if (data.likeScale.get() > 2) {
            animate.ease(data.backgroundColor, GROWING_COLOR)
        } 

        animate.ease(data.likeScale, data.likeScale.get() + 1)
    }
}

export const KeepGrowingButton: Override = () => {
    setInterval(keepGrowing, 100)

    return {
        scale: data.likeScale,

        onTapStart() {
            isGrowing = true
        },

        onTapEnd() {
            isGrowing = false
            
            animate.spring(data.likeScale, 1)
            animate.spring(data.backgroundColor, STABLE_COLOR)
        }
    }
}

export const BackgroundStatus: Override = () => {
    return {
        background: data.backgroundColor
    }
}