About

Showcasing Interests and Achievements

This section showcases my passions, milestones, and the creative pursuits that shape my journey. It offers a glimpse into the aspirations driving my personal and professional growth.

Discover More

Sharing Passions That Define My Journey

Meet the Creative Minds Behind My Journey

Alex Carter

Visual Designer

Specializing in crafting visually striking and user-friendly designs.

Jordan Lee

Content Strategist

Known for curating engaging storytelling and impactful narratives.

Taylor Morgan

Web Developer

Focused on building seamless and innovative digital solutions.

Casey Bennett

Project Manager

Excels in coordinating projects with precision and strategic insight.

Milestones That Define My Journey

Explore inspiring feedback from clients who value creativity and dedication.

The team exceeded expectations, delivering exceptional results with care and expertise.

Julia Bennett

Creative Consultant

Outstanding professionalism and attention to detail turned every idea into reality.

Michael Strauss

Project Manager

An exceptional experience that left me thrilled with the quality and seamless process.

Sophia Carter

Digital Strategist

import { useGSAP} from "@gsap/react";
import gsap from "gsap";
const GsapTimeline = () => {
  // TODO: Implement the gsap timeline
  const timeline = gsap.timeline({
    repeat: -1, repeatDelay: 1, yoyo: true
  });

  useGSAP(() => {
    timeline.to('#yellow-box', {
      x: 250, 
      rotation: 360,
      borderRadius: '100%',
      duration: 2,
      ease: 'back.inOut'
    })
    timeline.to('#yellow-box', {
      x: 500, 
      scale: 1,
      rotation: 360,
      borderRadius: '8px%',
      duration: 2,
      ease: 'back.inOut'
    })
  })

  return (
    <main>
      <h1>GsapTimeline</h1>

      <p className="mt-5 text-gray-500">
        The <code>gsap.timeline()</code> method is used to create a timeline
        instance that can be used to manage multiple animations.
      </p>

      <p className="mt-5 text-gray-500">
        The <code>gsap.timeline()</code> method is similar to the{" "}
        <code>gsap.to()</code>, <code>gsap.from()</code>, and{" "}
        <code>gsap.fromTo()</code> methods, but the difference is that the{" "}
        <code>gsap.timeline()</code> method is used to create a timeline
        instance that can be used to manage multiple animations, while the{" "}
        <code>gsap.to()</code>, <code>gsap.from()</code>, and{" "}
        <code>gsap.fromTo()</code> methods are used to animate elements from
        their current state to a new state, from a new state to their current
        state, and from a new state to a new state, respectively.
      </p>

      <p className="mt-5 text-gray-500">
        Read more about the{" "}
        <a
          href="https://greensock.com/docs/v3/GSAP/gsap.timeline()"
          target="_blank"
          rel="noreferrer noopener nofollow"
        >
          gsap.timeline()
        </a>{" "}
        method.
      </p>

      <div className="mt-20 space-y-10">
        <button onClick={() => {}}>Play/Pause</button>

        <div id="yellow-box" className="w-20 h-20 bg-yellow-500 rounded-lg" />
      </div>
    </main>
  );
};

export default GsapTimeline;