Help, where do I start? Animated Character videos

Tue, 20 Oct 2026 13:06:15 +0000

I've got an idea that I would like to explore, to create some short (most likely hosted on YouTube) animated videos, with regular talking characters. I'm looking for an illustrated style, so my though was to use AI to help me generate the video and audio consistently.

There are plenty of people doing this so how hard can it be? I started my research, and quickly became overwhelmed. There are so many products, platforms and AI models out there all happy to take my limited budget.

But how do I choose, I watched so many tutorials, asked AI, read blogs and now feel the choice is even harder.

Some of the platforms I've considered are:

Google Flow / Whisk
ChatGPT
Claude
Moonshot AI
Higgsfield
Slop Club
Meta AI

If you've had an experience generating these type of videos using AI I would love to hear what tools you recommend and any advice or tutorials I should take.

Thanks in advance. 🙏🏻

Animate Like a Pro: Build a Modern Scroll-Triggered Website with GSAP

Mon, 30 Jun 2025 06:17:22 +0000

Introduction

Modern websites aren’t just static layouts—they breathe, respond, and tell stories. In this guide, we’ll walk through how to build a modern, scroll-triggered, animation-rich website using GSAP (GreenSock Animation Platform).

Inspired by top-tier Awwwards websites, this post teaches you how to:

Animate text on page load

Trigger elements on scroll

Create parallax effects

Add interactive hover animations

Optimize for performance and responsiveness

All with clean code and professional structure.

Setting Up Your Project

Create your basic folder structure:

project/
├── index.html
├── styles.css
└── script.js

index.html

<section class="hero">
  <h1 class="headline">We Design for Impact</h1>
  <button class="cta">Discover More</button>
</section>

styles.css

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #121212;
  color: #fff;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Include GSAP via CDN in your HTML:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

Animate Hero Section with GSAP Timeline

Let’s animate the headline and button on page load using gsap.timeline():

const tl = gsap.timeline();

tl.from(".headline", {
  y: 100,
  opacity: 0,
  duration: 1.2,
  ease: "power4.out"
})
.from(".cta", {
  y: 20,
  opacity: 0,
  duration: 1,
  ease: "back.out(1.7)"
}, "-=0.5");

Result: Smooth fade-in entrance animation with professional timing and bounce.

ScrollTrigger Section Animations

Create reusable section reveals using ScrollTrigger:

<section class="section">About</section>
<section class="section">Projects</section>
<section class="section">Contact</section>

gsap.utils.toArray(".section").forEach(section => {
  gsap.from(section, {
    scrollTrigger: {
      trigger: section,
      start: "top 85%",
      toggleActions: "play none none reverse"
    },
    y: 100,
    opacity: 0,
    duration: 1
  });
});

Result: Each section fades and slides in when scrolled into view.

Create a Parallax Effect

Use a parallax background for depth:

<div class="parallax-wrapper">
  <img src="bg.jpg" class="bg-image" />
</div>

.parallax-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.bg-image {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: -1;
}

gsap.to(".bg-image", {
  scrollTrigger: {
    trigger: ".parallax-wrapper",
    scrub: true,
  },
  y: "-30%",
  ease: "none"
});

Result: Smooth scroll-linked background motion—eye-catching and modern.

Add Hover Animation to Elements

Create hover-based animations for interactive elements:

<div class="card">Hover me</div>

.card {
  width: 200px;
  height: 200px;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

document.querySelectorAll(".card").forEach(card => {
  card.addEventListener("mouseenter", () => {
    gsap.to(card, { scale: 1.05, duration: 0.3 });
  });
  card.addEventListener("mouseleave", () => {
    gsap.to(card, { scale: 1, duration: 0.3 });
  });
});

Result: Subtle interactivity that improves UX without overwhelming.

Responsive & Mobile Optimization

Use ScrollTrigger.matchMedia() to conditionally control animations based on screen size:

ScrollTrigger.matchMedia({
  "(min-width: 768px)": function() {
    gsap.from(".cta", {
      y: 50,
      opacity: 0,
      duration: 1,
      scrollTrigger: {
        trigger: ".cta",
        start: "top 80%"
      }
    });
  }
});

Pro Tip: Disable or simplify animations for low-powered mobile devices.

Final Touches & Best Practices

Use performance-friendly easing like "power2.out" or "none" for scroll-linked effects

Use will-change CSS property for elements that animate

Avoid layout jank: Animate transform, not top/left

Bonus: What Makes It Awwwards-Worthy?

Consistent motion rhythm

Smooth easing and microinteractions

Strategic use of white space and bold type

Layered visual depth (z-index, parallax, lighting)

✅ Conclusion

This step-by-step journey demonstrates how to transform basic markup into a sophisticated, animated web experience using GSAP. Whether you're enhancing a portfolio, creating a product landing page, or experimenting with scroll-based storytelling, GSAP and ScrollTrigger give you the control and fluidity needed to stand out.

Coder Legion - Recent posts tagged animation

Help, where do I start? Animated Character videos

Animate Like a Pro: Build a Modern Scroll-Triggered Website with GSAP