# extendify/0.11.0/src/Onboarding/hooks/useAnimatedHeight.js

Extendify, version 0.11.0. 46 lines.

- Page: https://pluginprobe.com/plugins/extendify/0.11.0/code/src/Onboarding/hooks/useAnimatedHeight.js
- Raw: https://pluginprobe.com/plugins/extendify/0.11.0/raw/src/Onboarding/hooks/useAnimatedHeight.js
- Modified: 2022-09-20T18:01:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/extendify/0.11.0/code/src/Onboarding/hooks/useAnimatedHeight.js#L10-L20`.

```javascript
import { useEffect } from '@wordpress/element'

export const useAnimatedHeight = (preview, blockHeight, ready) => {
    useEffect(() => {
        let raf1, raf2
        if (!preview.current) return
        const p = preview.current
        const iframe = p?.querySelector('iframe[title]')
        if (!iframe) return
        const content = iframe.contentWindow.document.body
        const scale = preview.offsetWidth / 1400
        iframe.style.maxHeight = `${blockHeight / scale}px`

        const handleIn = () => {
            if (!content?.offsetHeight) return
            // The live component changes over time so easier to query on demand
            const height = content.offsetHeight
            content.style.transitionDuration = Math.max(height * 3, 3000) + 'ms'
            raf1 = window.requestAnimationFrame(() => {
                content.style.top = Math.abs(height - blockHeight) * -1 + 'px'
            })
        }
        const handleOut = () => {
            if (!content?.offsetHeight) return
            const height = content.offsetHeight
            content.style.transitionDuration = height / 1.5 + 'ms'
            raf2 = window.requestAnimationFrame(() => {
                content.style.top = 0
            })
        }

        p.addEventListener('focus', handleIn)
        p.addEventListener('mouseenter', handleIn)
        p.addEventListener('blur', handleOut)
        p.addEventListener('mouseleave', handleOut)
        return () => {
            window.cancelAnimationFrame(raf1)
            window.cancelAnimationFrame(raf2)
            p.removeEventListener('focus', handleIn)
            p.removeEventListener('mouseenter', handleIn)
            p.removeEventListener('blur', handleOut)
            p.removeEventListener('mouseleave', handleOut)
        }
    }, [blockHeight, preview, ready])
}

```