Skip to content

Blur Fade

Blur fade in and out animation. Used to smoothly fade in and out content.

Hello World 👋
Nice to meet you ✨

Installation

Copy and paste the following code into your project:

BlurFade.vue
vue
<script setup lang='ts'>
interface BlurFadeProps {
  class?: string
  variant?: {
    hidden: { y: number }
    visible: { y: number }
    enter: { y: number }
  }
  duration?: number
  delay?: number
  yOffset?: number
  inView?: boolean
  blur?: string
  inViewMargin?: string
};

const props = withDefaults(defineProps<BlurFadeProps>(), {
  duration: 0.4,
  delay: 500,
  yOffset: 6,
  inView: false,
  inViewMargin: '-50px',
  blur: '6px',
})
const defaultVariants = {
  hidden: { y: props.yOffset, opacity: 0, filter: `blur(${props.blur})` },
  visible: {
    y: -props.yOffset,
    opacity: 1,
    filter: 'blur(0px)',
    transition: {
      delay: 0.04 + props.delay,
      duration: 500,
      ease: 'easeIn',
    },
  },
  enter: {
    y: -props.yOffset,
    opacity: 1,
    transition: {
      delay: 0.04 + props.delay,
      duration: 500,
      ease: 'easeIn',
    },
    filter: 'blur(0px)',
  },
}

const combinedVariants = props.variant || defaultVariants
</script>

<template>
  <div
    v-motion :initial="combinedVariants.hidden" :visible="props.inView ? combinedVariants.visible : undefined"
    :enter="!props.inView ? combinedVariants.enter : undefined" :class="props.class"
  >
    <slot />
  </div>
</template>

Props

PropTypeDescriptionDefault
classstringThe class name to be applied to the component
variantobjectCustom animation variants for motion component
durationnumberDuration (seconds) for the animation0.4
delaynumberDelay (seconds) before the animation starts0
yOffsetnumberVertical offset for the animation6
inViewbooleanWhether to trigger animation when component is in viewfalse
inViewMarginMarginTypeMargin for triggering the in-view animation"-50px"
blurstringAmount of blur to apply during the animation"6px"

Released under the MIT License.