Untitled Snippet

// Get the butterflies container

const butterfliesContainer = document.querySelector('.butterflies');

// Create a function to generate a butterfly

function createButterfly() {

  const butterfly = document.createElement('div');

  butterfly.className = 'butterfly';

  butterfliesContainer.appendChild(butterfly);

  return butterfly;

}

// Create multiple butterflies

for (let i = 0; i < 20; i++) {

  createButterfly();

}

// Animate the butterflies

gsap.timeline()

  .staggerTo('.butterfly', 3, {

    x: '100%',

    y: '100%',

    ease: 'power2.inOut',

    stagger: 0.1

  }, 0.1)

// Create a function to transform the butterflies into a dress

function transformIntoDress() {

  // Get the dress container

  const dressContainer = document.querySelector('.dress');

  // Animate the dress appearance

  gsap.to(dressContainer, 2, {

    display: 'block',

    opacity: 1,

    ease: 'power2.inOut'

  });

  // Animate the butterflies disappearing

  gsap.to('.butterfly', 2, {

    opacity: 0,

    ease: 'power2.inOut'

  });

  // Animate the dress shape transformation

  gsap.to(dressContainer, 2, {

    width: '300px',

    height: '300px',

    borderRadius: '0',

    ease: 'power2.inOut'

  });

}

// Call the transformation function after a delay

setTimeout(transformIntoDress, 5000);