Code
function smoothstep(min: number, max: number, value: number): number {
if (min === max) return 0;
const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
return t * t * (3 - 2 * t);
}
Parameters
| Parameter | Description |
|---|---|
min | Value where the transition starts. |
max | Value where the transition ends. |
value | Current value mapped to the smoothed curve. |
Nuxt Example
<script setup lang="ts">
const smoothstep = (min: number, max: number, value: number) => {
if (min === max) return 0
const t = Math.max(0, Math.min(1, (value - min) / (max - min)))
return t * t * (3 - 2 * t)
}
const opacity = ref(0)
const handleScroll = () => {
opacity.value = smoothstep(0, 300, window.scrollY)
}
onMounted(() => {
handleScroll()
window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
</script>
<template>
<section class="hero" :style="{ opacity }">
<h1>A title that fades in smoothly</h1>
</section>
</template>
<style scoped>
.hero {
min-height: 60vh;
display: grid;
place-items: center;
font-size: clamp(2rem, 6vw, 4rem);
transition: opacity 0.1s linear;
}
</style>