From 9f56d0c23ea3fde8bfc9d7ca8aec7881dbe23b46 Mon Sep 17 00:00:00 2001
From: freakdaniel <whoisfreak@icloud.com>
Date: Wed, 3 Dec 2025 10:07:02 +0300
Subject: [PATCH 1/4] Enhance animation components with disappear functionality

---
 src/constants/Categories.ts                   |   2 +-
 .../AnimatedContent/AnimatedContent.vue       | 120 ++++++++----------
 .../Animations/FadeContent/FadeContent.vue    | 105 ++++++++++-----
 src/demo/Animations/AnimatedContentDemo.vue   |  43 +++++++
 src/demo/Animations/FadeContentDemo.vue       |  78 ++++++++++--
 5 files changed, 239 insertions(+), 109 deletions(-)

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index c286951..21f4397 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -1,6 +1,6 @@
 // Highlighted sidebar items
 export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines'];
-export const UPDATED = [];
+export const UPDATED = ['Animated Content', 'Fade Content'];
 
 // Used for main sidebar navigation
 export const CATEGORIES = [
diff --git a/src/content/Animations/AnimatedContent/AnimatedContent.vue b/src/content/Animations/AnimatedContent/AnimatedContent.vue
index e6b3f76..8f26d52 100644
--- a/src/content/Animations/AnimatedContent/AnimatedContent.vue
+++ b/src/content/Animations/AnimatedContent/AnimatedContent.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
 gsap.registerPlugin(ScrollTrigger);
 
 interface AnimatedContentProps {
+  container?: string | HTMLElement | null;
   distance?: number;
   direction?: 'vertical' | 'horizontal';
   reverse?: boolean;
@@ -16,10 +17,14 @@ interface AnimatedContentProps {
   scale?: number;
   threshold?: number;
   delay?: number;
+  disappearAfter?: number;
+  disappearDuration?: number;
+  disappearEase?: string | ((progress: number) => number);
   className?: string;
 }
 
 const props = withDefaults(defineProps<AnimatedContentProps>(), {
+  container: null,
   distance: 100,
   direction: 'vertical',
   reverse: false,
@@ -30,19 +35,32 @@ const props = withDefaults(defineProps<AnimatedContentProps>(), {
   scale: 1,
   threshold: 0.1,
   delay: 0,
+  disappearAfter: 0,
+  disappearDuration: 0.5,
+  disappearEase: 'power3.in',
   className: ''
 });
 
 const emit = defineEmits<{
   complete: [];
+  disappearanceComplete: [];
 }>();
 
 const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+let scrollTriggerInstance: ScrollTrigger | null = null;
+let timelineInstance: gsap.core.Timeline | null = null;
 
 onMounted(() => {
   const el = containerRef.value;
   if (!el) return;
 
+  let scrollerTarget: HTMLElement | string | null =
+    props.container || document.getElementById('snap-main-container') || null;
+
+  if (typeof scrollerTarget === 'string') {
+    scrollerTarget = document.querySelector(scrollerTarget) as HTMLElement | null;
+  }
+
   const axis = props.direction === 'horizontal' ? 'x' : 'y';
   const offset = props.reverse ? -props.distance : props.distance;
   const startPct = (1 - props.threshold) * 100;
@@ -50,86 +68,54 @@ onMounted(() => {
   gsap.set(el, {
     [axis]: offset,
     scale: props.scale,
-    opacity: props.animateOpacity ? props.initialOpacity : 1
+    opacity: props.animateOpacity ? props.initialOpacity : 1,
+    visibility: 'visible'
+  });
+
+  timelineInstance = gsap.timeline({
+    paused: true,
+    delay: props.delay,
+    onComplete: () => {
+      emit('complete');
+      if (props.disappearAfter > 0) {
+        gsap.to(el, {
+          [axis]: props.reverse ? props.distance : -props.distance,
+          scale: 0.8,
+          opacity: props.animateOpacity ? props.initialOpacity : 0,
+          delay: props.disappearAfter,
+          duration: props.disappearDuration,
+          ease: props.disappearEase,
+          onComplete: () => emit('disappearanceComplete')
+        });
+      }
+    }
   });
 
-  gsap.to(el, {
+  timelineInstance.to(el, {
     [axis]: 0,
     scale: 1,
     opacity: 1,
     duration: props.duration,
-    ease: props.ease,
-    delay: props.delay,
-    onComplete: () => emit('complete'),
-    scrollTrigger: {
-      trigger: el,
-      start: `top ${startPct}%`,
-      toggleActions: 'play none none none',
-      once: true
-    }
+    ease: props.ease
   });
-});
 
-watch(
-  () => [
-    props.distance,
-    props.direction,
-    props.reverse,
-    props.duration,
-    props.ease,
-    props.initialOpacity,
-    props.animateOpacity,
-    props.scale,
-    props.threshold,
-    props.delay
-  ],
-  () => {
-    const el = containerRef.value;
-    if (!el) return;
-
-    ScrollTrigger.getAll().forEach(t => t.kill());
-    gsap.killTweensOf(el);
-
-    const axis = props.direction === 'horizontal' ? 'x' : 'y';
-    const offset = props.reverse ? -props.distance : props.distance;
-    const startPct = (1 - props.threshold) * 100;
-
-    gsap.set(el, {
-      [axis]: offset,
-      scale: props.scale,
-      opacity: props.animateOpacity ? props.initialOpacity : 1
-    });
-
-    gsap.to(el, {
-      [axis]: 0,
-      scale: 1,
-      opacity: 1,
-      duration: props.duration,
-      ease: props.ease,
-      delay: props.delay,
-      onComplete: () => emit('complete'),
-      scrollTrigger: {
-        trigger: el,
-        start: `top ${startPct}%`,
-        toggleActions: 'play none none none',
-        once: true
-      }
-    });
-  },
-  { deep: true }
-);
+  scrollTriggerInstance = ScrollTrigger.create({
+    trigger: el,
+    scroller: scrollerTarget,
+    start: `top ${startPct}%`,
+    once: true,
+    onEnter: () => timelineInstance?.play()
+  });
+});
 
 onUnmounted(() => {
-  const el = containerRef.value;
-  if (el) {
-    ScrollTrigger.getAll().forEach(t => t.kill());
-    gsap.killTweensOf(el);
-  }
+  scrollTriggerInstance?.kill();
+  timelineInstance?.kill();
 });
 </script>
 
 <template>
-  <div ref="containerRef" :class="`animated-content ${props.className}`">
+  <div ref="containerRef" :class="className" style="visibility: hidden">
     <slot />
   </div>
 </template>
diff --git a/src/content/Animations/FadeContent/FadeContent.vue b/src/content/Animations/FadeContent/FadeContent.vue
index 93f9c7a..1047c71 100644
--- a/src/content/Animations/FadeContent/FadeContent.vue
+++ b/src/content/Animations/FadeContent/FadeContent.vue
@@ -1,66 +1,111 @@
 <template>
-  <div
-    ref="elementRef"
-    :class="className"
-    :style="{
-      opacity: inView ? 1 : initialOpacity,
-      transition: `opacity ${duration}ms ${easing}, filter ${duration}ms ${easing}`,
-      filter: blur ? (inView ? 'blur(0px)' : 'blur(10px)') : 'none'
-    }"
-  >
+  <div ref="elementRef" :class="className" style="visibility: hidden">
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
 
 interface Props {
+  container?: string | HTMLElement | null;
   blur?: boolean;
   duration?: number;
-  easing?: string;
+  ease?: string | ((progress: number) => number);
   delay?: number;
   threshold?: number;
   initialOpacity?: number;
+  disappearAfter?: number;
+  disappearDuration?: number;
+  disappearEase?: string | ((progress: number) => number);
   className?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  container: null,
   blur: false,
-  duration: 1000,
-  easing: 'ease-out',
+  duration: 1,
+  ease: 'power2.out',
   delay: 0,
   threshold: 0.1,
   initialOpacity: 0,
+  disappearAfter: 0,
+  disappearDuration: 0.5,
+  disappearEase: 'power2.in',
   className: ''
 });
 
-const inView = ref(false);
+const emit = defineEmits<{
+  complete: [];
+  disappearanceComplete: [];
+}>();
+
 const elementRef = useTemplateRef<HTMLDivElement>('elementRef');
-let observer: IntersectionObserver | null = null;
+let scrollTriggerInstance: ScrollTrigger | null = null;
+let timelineInstance: gsap.core.Timeline | null = null;
 
 onMounted(() => {
-  const element = elementRef.value;
-  if (!element) return;
+  const el = elementRef.value;
+  if (!el) return;
+
+  let scrollerTarget: HTMLElement | string | null =
+    props.container || document.getElementById('snap-main-container') || null;
+
+  if (typeof scrollerTarget === 'string') {
+    scrollerTarget = document.querySelector(scrollerTarget) as HTMLElement | null;
+  }
+
+  const startPct = (1 - props.threshold) * 100;
 
-  observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting) {
-        observer?.unobserve(element);
-        setTimeout(() => {
-          inView.value = true;
-        }, props.delay);
+  gsap.set(el, {
+    opacity: props.initialOpacity,
+    filter: props.blur ? 'blur(10px)' : 'blur(0px)',
+    visibility: 'visible'
+  });
+
+  timelineInstance = gsap.timeline({
+    paused: true,
+    delay: props.delay,
+    onComplete: () => {
+      emit('complete');
+      if (props.disappearAfter > 0) {
+        gsap.to(el, {
+          opacity: props.initialOpacity,
+          filter: props.blur ? 'blur(10px)' : 'blur(0px)',
+          delay: props.disappearAfter,
+          duration: props.disappearDuration,
+          ease: props.disappearEase,
+          onComplete: () => emit('disappearanceComplete')
+        });
       }
-    },
-    { threshold: props.threshold }
-  );
+    }
+  });
+
+  timelineInstance.to(el, {
+    opacity: 1,
+    filter: 'blur(0px)',
+    duration: props.duration,
+    ease: props.ease
+  });
 
-  observer.observe(element);
+  scrollTriggerInstance = ScrollTrigger.create({
+    trigger: el,
+    scroller: scrollerTarget || window,
+    start: `top ${startPct}%`,
+    once: true,
+    onEnter: () => timelineInstance?.play()
+  });
 });
 
 onUnmounted(() => {
-  if (observer) {
-    observer.disconnect();
+  scrollTriggerInstance?.kill();
+  timelineInstance?.kill();
+  if (elementRef.value) {
+    gsap.killTweensOf(elementRef.value);
   }
 });
 </script>
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index feb71ee..3a204fe 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -14,8 +14,12 @@
           :animate-opacity="animateOpacity"
           :scale="scale"
           :threshold="threshold"
+          :disappear-after="disappearAfter"
+          :disappear-duration="disappearDuration"
+          :disappear-ease="disappearEase"
           :key="key"
           @complete="() => console.log('✅ Animation Complete!')"
+          @disappearance-complete="() => console.log('👋 Disappearance Complete!')"
         >
           <div class="demo-content">
             <h4>Animated Content</h4>
@@ -44,6 +48,12 @@
         <PreviewSwitch title="Reverse Direction" v-model="reverse" />
 
         <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" />
+
+        <PreviewSlider title="Disappear After" v-model="disappearAfter" :min="0" :max="5" :step="0.5" value-unit="s" />
+
+        <PreviewSlider title="Disappear Duration" v-model="disappearDuration" :min="0.1" :max="2" :step="0.1" value-unit="s" />
+
+        <PreviewSelect title="Disappear Ease" v-model="disappearEase" :options="disappearEaseOptions" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -89,6 +99,9 @@ const initialOpacity = ref(0);
 const animateOpacity = ref(true);
 const scale = ref(1);
 const threshold = ref(0.1);
+const disappearAfter = ref(0);
+const disappearDuration = ref(0.5);
+const disappearEase = ref('power3.in');
 
 const directionOptions = [
   { label: 'Vertical', value: 'vertical' },
@@ -101,6 +114,12 @@ const easeOptions = [
   { label: 'Elastic Out', value: 'elastic.out(1, 0.3)' }
 ];
 
+const disappearEaseOptions = [
+  { label: 'Power3 In', value: 'power3.in' },
+  { label: 'Power2 In', value: 'power2.in' },
+  { label: 'Bounce In', value: 'bounce.in' }
+];
+
 const propData = [
   {
     name: 'distance',
@@ -167,6 +186,30 @@ const propData = [
     type: 'string',
     default: '""',
     description: 'Additional CSS classes for styling.'
+  },
+  {
+    name: 'container',
+    type: 'string | HTMLElement | null',
+    default: 'null',
+    description: 'Custom scroll container element or selector.'
+  },
+  {
+    name: 'disappearAfter',
+    type: 'number',
+    default: '0',
+    description: 'Delay before disappear animation starts (in seconds). Set to 0 to disable.'
+  },
+  {
+    name: 'disappearDuration',
+    type: 'number',
+    default: '0.5',
+    description: 'Duration of the disappear animation in seconds.'
+  },
+  {
+    name: 'disappearEase',
+    type: 'string | function',
+    default: '"power3.in"',
+    description: 'GSAP easing function for the disappear animation.'
   }
 ];
 
diff --git a/src/demo/Animations/FadeContentDemo.vue b/src/demo/Animations/FadeContentDemo.vue
index e1e53fb..fd28e04 100644
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -11,8 +11,13 @@
           :delay="delay"
           :threshold="threshold"
           :initial-opacity="initialOpacity"
-          :easing="easing"
+          :ease="ease"
+          :disappear-after="disappearAfter"
+          :disappear-duration="disappearDuration"
+          :disappear-ease="disappearEase"
           class="fade-content-demo-content"
+          @complete="() => console.log('✅ Fade Complete!')"
+          @disappearance-complete="() => console.log('👋 Disappearance Complete!')"
         >
           <div class="demo-content">
             <h4>Fade Content</h4>
@@ -25,16 +30,26 @@
       <Customize>
         <PreviewSwitch title="Enable Blur Effect" v-model="blur" />
 
-        <PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100" />
+        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s" />
 
-        <PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50" />
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s" />
 
         <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
 
         <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
+
+        <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
+
+        <PreviewSlider title="Disappear After" v-model="disappearAfter" :min="0" :max="5" :step="0.5" value-unit="s" />
+
+        <PreviewSlider title="Disappear Duration" v-model="disappearDuration" :min="0.1" :max="2" :step="0.1" value-unit="s" />
+
+        <PreviewSelect title="Disappear Ease" v-model="disappearEase" :options="disappearEaseOptions" />
       </Customize>
 
       <PropTable :data="propData" />
+
+      <Dependencies :dependency-list="['gsap']" />
     </template>
 
     <template #code>
@@ -52,28 +67,45 @@ import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
 import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
 import FadeContent from '../../content/Animations/FadeContent/FadeContent.vue';
 import { fadeContent } from '@/constants/code/Animations/fadeContentCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
 const blur = ref(true);
-const duration = ref(1000);
-const delay = ref(200);
+const duration = ref(1);
+const delay = ref(0.2);
 const threshold = ref(0.1);
 const initialOpacity = ref(0);
-const easing = ref('ease-out');
+const ease = ref('power2.out');
+const disappearAfter = ref(0);
+const disappearDuration = ref(0.5);
+const disappearEase = ref('power2.in');
 const { rerenderKey, forceRerender } = useForceRerender();
 
+const easeOptions = [
+  { label: 'Power2 Out', value: 'power2.out' },
+  { label: 'Power3 Out', value: 'power3.out' },
+  { label: 'Ease Out', value: 'ease.out' }
+];
+
+const disappearEaseOptions = [
+  { label: 'Power2 In', value: 'power2.in' },
+  { label: 'Power3 In', value: 'power3.in' },
+  { label: 'Ease In', value: 'ease.in' }
+];
+
 const propData = [
   { name: 'blur', type: 'boolean', default: 'false', description: 'Enable blur effect during fade animation.' },
-  { name: 'duration', type: 'number', default: '1000', description: 'Animation duration in milliseconds.' },
-  { name: 'easing', type: 'string', default: '"ease-out"', description: 'CSS easing function for the animation.' },
-  { name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in milliseconds.' },
+  { name: 'duration', type: 'number', default: '1', description: 'Animation duration in seconds.' },
+  { name: 'ease', type: 'string | function', default: '"power2.out"', description: 'GSAP easing function for the animation.' },
+  { name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in seconds.' },
   {
     name: 'threshold',
     type: 'number',
@@ -81,10 +113,34 @@ const propData = [
     description: 'Intersection threshold to trigger animation (0-1).'
   },
   { name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
-  { name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
+  { name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' },
+  {
+    name: 'container',
+    type: 'string | HTMLElement | null',
+    default: 'null',
+    description: 'Custom scroll container element or selector.'
+  },
+  {
+    name: 'disappearAfter',
+    type: 'number',
+    default: '0',
+    description: 'Delay before disappear animation starts (in seconds). Set to 0 to disable.'
+  },
+  {
+    name: 'disappearDuration',
+    type: 'number',
+    default: '0.5',
+    description: 'Duration of the disappear animation in seconds.'
+  },
+  {
+    name: 'disappearEase',
+    type: 'string | function',
+    default: '"power2.in"',
+    description: 'GSAP easing function for the disappear animation.'
+  }
 ];
 
-watch(blur, () => {
+watch([blur, ease, disappearEase], () => {
   forceRerender();
 });
 </script>

From 62d5c16ac432ee8db79b074910e36e3eb577d8d3 Mon Sep 17 00:00:00 2001
From: freakdaniel <whoisfreak@icloud.com>
Date: Wed, 3 Dec 2025 10:22:40 +0300
Subject: [PATCH 2/4] Update code templates in costants

---
 .../code/Animations/animatedContentCode.ts    | 12 +++++++++--
 .../code/Animations/fadeContentCode.ts        | 20 ++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/constants/code/Animations/animatedContentCode.ts b/src/constants/code/Animations/animatedContentCode.ts
index b827a1f..77dac5c 100644
--- a/src/constants/code/Animations/animatedContentCode.ts
+++ b/src/constants/code/Animations/animatedContentCode.ts
@@ -15,7 +15,11 @@ export const animatedContent = createCodeObject(code, 'Animations/AnimatedConten
     :scale="1"
     :threshold="0.1"
     :delay="0"
+    :disappear-after="0"
+    :disappear-duration="0.5"
+    disappear-ease="power3.in"
     @complete="handleComplete"
+    @disappearance-complete="handleDisappearance"
   >
     <div class="your-content">
       Content to animate
@@ -27,7 +31,11 @@ export const animatedContent = createCodeObject(code, 'Animations/AnimatedConten
   import AnimatedContent from "./AnimatedContent.vue";
   
   const handleComplete = () => {
-    console.log("Animation completed!");,
-});
+    console.log("Animation completed!");
+  };
+
+  const handleDisappearance = () => {
+    console.log("Disappearance completed!");
+  };
 </script>`
 });
diff --git a/src/constants/code/Animations/fadeContentCode.ts b/src/constants/code/Animations/fadeContentCode.ts
index 65a73d3..b4b3ce6 100644
--- a/src/constants/code/Animations/fadeContentCode.ts
+++ b/src/constants/code/Animations/fadeContentCode.ts
@@ -2,15 +2,21 @@ import code from '@content/Animations/FadeContent/FadeContent.vue?raw';
 import { createCodeObject } from '@/types/code';
 
 export const fadeContent = createCodeObject(code, 'Animations/FadeContent', {
+  installation: `npm install gsap`,
   usage: `<template>
   <FadeContent
     :blur="true"
-    :duration="1000"
-    :delay="200"
+    :duration="1"
+    :delay="0.2"
     :threshold="0.1"
     :initial-opacity="0"
-    easing="ease-out"
+    ease="power2.out"
+    :disappear-after="0"
+    :disappear-duration="0.5"
+    disappear-ease="power2.in"
     class-name="my-fade-content"
+    @complete="handleComplete"
+    @disappearance-complete="handleDisappearance"
   >
     <div class="content-to-fade">
       <h2>This content will fade in!</h2>
@@ -21,5 +27,13 @@ export const fadeContent = createCodeObject(code, 'Animations/FadeContent', {
 
 <script setup lang="ts">
   import FadeContent from "./FadeContent.vue";
+
+  const handleComplete = () => {
+    console.log("Fade completed!");
+  };
+
+  const handleDisappearance = () => {
+    console.log("Disappearance completed!");
+  };
 </script>`
 });

From 2924e7f19fe3a5497726544a6ac50ac2cc043f2a Mon Sep 17 00:00:00 2001
From: freakdaniel <whoisfreak@icloud.com>
Date: Fri, 5 Dec 2025 15:41:53 +0300
Subject: [PATCH 3/4] Fix FadeContent to match react-bits pattern

---
 .../Animations/FadeContent/FadeContent.vue    | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/content/Animations/FadeContent/FadeContent.vue b/src/content/Animations/FadeContent/FadeContent.vue
index 1047c71..5c47958 100644
--- a/src/content/Animations/FadeContent/FadeContent.vue
+++ b/src/content/Animations/FadeContent/FadeContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="elementRef" :class="className" style="visibility: hidden">
+  <div ref="elementRef" :class="className">
     <slot />
   </div>
 </template>
@@ -22,13 +22,15 @@ interface Props {
   disappearAfter?: number;
   disappearDuration?: number;
   disappearEase?: string | ((progress: number) => number);
+  onComplete?: () => void;
+  onDisappearanceComplete?: () => void;
   className?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   container: null,
   blur: false,
-  duration: 1,
+  duration: 1000,
   ease: 'power2.out',
   delay: 0,
   threshold: 0.1,
@@ -48,6 +50,8 @@ const elementRef = useTemplateRef<HTMLDivElement>('elementRef');
 let scrollTriggerInstance: ScrollTrigger | null = null;
 let timelineInstance: gsap.core.Timeline | null = null;
 
+const getSeconds = (val: number): number => (typeof val === 'number' && val > 10 ? val / 1000 : val);
+
 onMounted(() => {
   const el = elementRef.value;
   if (!el) return;
@@ -62,33 +66,37 @@ onMounted(() => {
   const startPct = (1 - props.threshold) * 100;
 
   gsap.set(el, {
-    opacity: props.initialOpacity,
+    autoAlpha: props.initialOpacity,
     filter: props.blur ? 'blur(10px)' : 'blur(0px)',
-    visibility: 'visible'
+    willChange: 'opacity, filter, transform'
   });
 
   timelineInstance = gsap.timeline({
     paused: true,
-    delay: props.delay,
+    delay: getSeconds(props.delay),
     onComplete: () => {
       emit('complete');
+      props.onComplete?.();
       if (props.disappearAfter > 0) {
         gsap.to(el, {
-          opacity: props.initialOpacity,
+          autoAlpha: props.initialOpacity,
           filter: props.blur ? 'blur(10px)' : 'blur(0px)',
-          delay: props.disappearAfter,
-          duration: props.disappearDuration,
+          delay: getSeconds(props.disappearAfter),
+          duration: getSeconds(props.disappearDuration),
           ease: props.disappearEase,
-          onComplete: () => emit('disappearanceComplete')
+          onComplete: () => {
+            emit('disappearanceComplete');
+            props.onDisappearanceComplete?.();
+          }
         });
       }
     }
   });
 
   timelineInstance.to(el, {
-    opacity: 1,
+    autoAlpha: 1,
     filter: 'blur(0px)',
-    duration: props.duration,
+    duration: getSeconds(props.duration),
     ease: props.ease
   });
 

From b9b8e63680b7c52619bb1d539ad2d862bdb88414 Mon Sep 17 00:00:00 2001
From: freakdaniel <whoisfreak@icloud.com>
Date: Fri, 5 Dec 2025 15:46:40 +0300
Subject: [PATCH 4/4] Update FadeContentDemo/code to match react-bits pattern

---
 .../code/Animations/fadeContentCode.ts        |  8 +++---
 src/demo/Animations/FadeContentDemo.vue       | 26 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/constants/code/Animations/fadeContentCode.ts b/src/constants/code/Animations/fadeContentCode.ts
index b4b3ce6..0016521 100644
--- a/src/constants/code/Animations/fadeContentCode.ts
+++ b/src/constants/code/Animations/fadeContentCode.ts
@@ -6,15 +6,17 @@ export const fadeContent = createCodeObject(code, 'Animations/FadeContent', {
   usage: `<template>
   <FadeContent
     :blur="true"
-    :duration="1"
-    :delay="0.2"
+    :duration="1000"
+    :delay="200"
     :threshold="0.1"
     :initial-opacity="0"
     ease="power2.out"
     :disappear-after="0"
-    :disappear-duration="0.5"
+    :disappear-duration="500"
     disappear-ease="power2.in"
     class-name="my-fade-content"
+    :on-complete="handleComplete"
+    :on-disappearance-complete="handleDisappearance"
     @complete="handleComplete"
     @disappearance-complete="handleDisappearance"
   >
diff --git a/src/demo/Animations/FadeContentDemo.vue b/src/demo/Animations/FadeContentDemo.vue
index fd28e04..794887f 100644
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -30,9 +30,9 @@
       <Customize>
         <PreviewSwitch title="Enable Blur Effect" v-model="blur" />
 
-        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Duration" v-model="duration" :min="100" :max="3000" :step="100" value-unit="ms" />
 
-        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2000" :step="100" value-unit="ms" />
 
         <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
 
@@ -40,9 +40,9 @@
 
         <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
 
-        <PreviewSlider title="Disappear After" v-model="disappearAfter" :min="0" :max="5" :step="0.5" value-unit="s" />
+        <PreviewSlider title="Disappear After" v-model="disappearAfter" :min="0" :max="5000" :step="500" value-unit="ms" />
 
-        <PreviewSlider title="Disappear Duration" v-model="disappearDuration" :min="0.1" :max="2" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Disappear Duration" v-model="disappearDuration" :min="100" :max="2000" :step="100" value-unit="ms" />
 
         <PreviewSelect title="Disappear Ease" v-model="disappearEase" :options="disappearEaseOptions" />
       </Customize>
@@ -79,13 +79,13 @@ import { fadeContent } from '@/constants/code/Animations/fadeContentCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
 const blur = ref(true);
-const duration = ref(1);
-const delay = ref(0.2);
+const duration = ref(1000);
+const delay = ref(200);
 const threshold = ref(0.1);
 const initialOpacity = ref(0);
 const ease = ref('power2.out');
 const disappearAfter = ref(0);
-const disappearDuration = ref(0.5);
+const disappearDuration = ref(500);
 const disappearEase = ref('power2.in');
 const { rerenderKey, forceRerender } = useForceRerender();
 
@@ -103,9 +103,9 @@ const disappearEaseOptions = [
 
 const propData = [
   { name: 'blur', type: 'boolean', default: 'false', description: 'Enable blur effect during fade animation.' },
-  { name: 'duration', type: 'number', default: '1', description: 'Animation duration in seconds.' },
+  { name: 'duration', type: 'number', default: '1000', description: 'Animation duration in milliseconds.' },
   { name: 'ease', type: 'string | function', default: '"power2.out"', description: 'GSAP easing function for the animation.' },
-  { name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in seconds.' },
+  { name: 'delay', type: 'number', default: '0', description: 'Delay before animation starts in milliseconds.' },
   {
     name: 'threshold',
     type: 'number',
@@ -113,6 +113,8 @@ const propData = [
     description: 'Intersection threshold to trigger animation (0-1).'
   },
   { name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
+  { name: 'onComplete', type: 'function', default: 'undefined', description: 'Callback function called when fade animation completes.' },
+  { name: 'onDisappearanceComplete', type: 'function', default: 'undefined', description: 'Callback function called when disappear animation completes.' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' },
   {
     name: 'container',
@@ -124,13 +126,13 @@ const propData = [
     name: 'disappearAfter',
     type: 'number',
     default: '0',
-    description: 'Delay before disappear animation starts (in seconds). Set to 0 to disable.'
+    description: 'Delay before disappear animation starts (in milliseconds). Set to 0 to disable.'
   },
   {
     name: 'disappearDuration',
     type: 'number',
-    default: '0.5',
-    description: 'Duration of the disappear animation in seconds.'
+    default: '500',
+    description: 'Duration of the disappear animation in milliseconds.'
   },
   {
     name: 'disappearEase',