Ponpon Mania: How Webgl and GSAP bring the dream of a comic sheep to life | Codrops

Ponpon Mania is an animated strip with ponpon, a megalomaniac sheep that dreams of becoming DJ. We wanted to explore telling stories further than traditional comics by combining playful interactions, flowing by gsap driven by GSAP and dynamic images. The goal was to create a comic that feels alive, in which readers come into direct contact with the world of Ponpon while they follow the story. The project evolved for a few months, from early sketches to interactive prototypes.

About us

We are Justine Soulie (Art Director & Illustrator) and Patrick Heng (Creative Developer), a creative duo with a passion for storytelling through visuals and interaction. Justine brings expertise in illustration, art direction and design, while Patrick focuses on creative development and interactive experiences. Together we investigate ways to make stories playful, more compelling and more fascinating.

Art direction

Our visual direction emphasizes tight layouts, bold colors and playful details. From the beginning we wanted the comic to feel alive and accessible, while we used design to support the story. On the homepage we wanted to create a simple, inviting scene that immediately draws the user, offers many interactive elements to explore and encourage involvement from the very first moment.

The strip is largely black and white and offers a simple and striking visual basis. Color appears selectively, especially when ponpon dreams of becoming DJ and is fully immersed in his imaginary world, which emphasizes these key moments and the reader’s attention is led. By scrolling activated animations naturally steer the focus, while hover effects and clickable elements invite to explore without interrupting the story flow.

To strengthen Ponpon’s connection with music, we have designed the navigation so that it looks like a music player. Readers browse through the chapters as if they were albums, with each panel functioning as a song. This structure reflects Ponpon’s DJ aspirations, making the reading experience intuitive, dynamic and closely linked to the story.

Technical approach

Our main goal was to reduce technical friction so that we could spend our energy on refining artistic management, the movement design and the animation of the website.

We used WebGL because it gave us full creative freedom when rendering. Even though the comic has a largely 2D appearance, we wanted the flexibility to add depth and apply it on disposal effects.

Based on Justine’s illustrator files, each layer and every visual element of each panel was exported as an individual image. These drugs were then packaged in optimized texture tatlasses using Free Texturepacker.

Once exported, the images were further compressed into GPU-friendly sizes to reduce memory use. With the help of the data generated by the packer, we have reconstructed every scene in WebGL by generating surfaces with the right size. Finally, everything was placed in a 3D scene where we apply the necessary shaders and animations to achieve the desired visual effects.

Technical stack and tools

Design

• Adobe Photoshop & Illustrator – Illustration and preparation of assets
• Figma -Lay-out and interface design

Development

• to look at -WebGL framework for display
• Nuxt.js -Frontend-Framework for structure and routing
• GSAP – Animation library for smooth and accurate movements
• Matter.js -Physics engine used on the over page
• Free Texturepacker – To make optimized texture tatlasses of exported assets
• Tweakpane -GUI-Tool for real-time error detection and fine tuning of parameters

Animate with GSAP

GSAP makes it easy to animate both stupid elements and webgl objects with a uniform syntax. The timeline system brought structure into complex sequences and combined this with Scroll trigger Streamlined, scrolling -based animations. We also used Split text To process text animations.

Startpage

For the homepage we wanted the very first that users see is playful and full of life. It introduces the three main characters, all animated, and sets the tone for the rest of the experience. Each element responds subtly to the mouse: the ponpon mask distorts slightly, balloons gently collide together and clouds float gently away. These micro interactions ensure that the scene feels tangible and invite visitors to explore the world of Ponpon Mania with curiosity and pleasure. We used GSAP timeline To choreograph the introduction animation, so that we can activate every element in order for a smooth and coherent unveiling.

// Simple repulsion we used for the clouds in our render function
const dx = baseX - mouse.x;
const dy = baseY - mouse.y;
const dist = Math.sqrt(dx * dx + dy * dy);

// Repel the cloud if the mouse is near
const radius = 2; // interaction radius
const strength = 1.5; // repulsion force
const repulsion = Math.max(0, 1 - dist / radius) * strength;

// Apply the repulsion with smooth spring motion
const targetX = basePosX + dx * repulsion;
const targetY = basePosY - Math.abs(dy * repulsion) / 2;

velocity.x += (targetX - position.x) * springStrength * deltaTime;
velocity.y += (targetY - position.y) * springStrength * deltaTime;

position.x += velocity.x;
position.y += velocity.y;

Chapter

For the chapter selection we wanted something simple yet suggestive for the musical universe of Ponpon. Each chapter is presented as an album cover, so that users can browse through it as if they are leaving through a record collection. We try to have a smooth and intuitive navigation, users can drag, scroll or click to explore and each chapter clicks in place for an easy and satisfactory selection experience.

Panel animation

For the panel animations we wanted every panel to feel alive, which would bring the illustrations of Justine to life through movement. We have spent a lot of time refining every detail, so that every scene feels expressive and unique. To use GSAP time lines Made it easy to structure and synchronize the different animations, making them flexible and reusable. Here is an example of a GSAP timeline that animates a panel, and shows how series can be connected smoothly to each other.

// Animate ponpons in sequence with GSAP timelines
const timeline = gsap.timeline({ repeat: -1, repeatDelay: 0.7 });
const uFlash = { value: 0 };
const flashTimeline = gsap.timeline({ paused: true });

function togglePonponGroup(index) {
  ponponsGroups.forEach((g, i) => (g.mesh.visible = i === index));
}

function triggerFlash() {
  const flashes = Math.floor(Math.random() * 2) + 1; // 1–2 flashes
  const duration = 0.4 / flashes;

  flashTimeline.clear();

  for (let i = 0; i < flashes; i++) {
    flashTimeline
      .set(uFlash, { value: 0.6 }, i * duration) // bright flash
      .to(uFlash, { value: 0, duration: duration * 0.9 }, i * duration + duration * 0.1); // fade out
  }

  flashTimeline.play();
}

ponponMeshes.forEach((ponpon, i) => {
  timeline.fromTo(
    ponpon.position,
    { y: ponpon.initialY - 0.2 },  // start slightly below
    {
      y: ponpon.initialY,          // bounce up
      duration: 1,
      ease: "elastic.out",
      onStart: () => {
        togglePonponGroup(i);      // show active group
        triggerFlash();            // trigger flash
      }
    },
    i * 1.6 // stagger delay between ponpons
  );
});

About page

On the page about, GSAP SCROLCTRIGGER Keep track of the scroll progress of each section. These values ​​control the WebGL scenes and arrange the display, transitions and camera movements. This ensures that the images remain perfectly synchronized with scrolling the user.

const sectionUniform = { progress: { value: 0 } };

// create a ScrollTrigger for one section
const sectionTrigger = ScrollTrigger.create({
  trigger: ".about-section",
  start: "top bottom",
  end: "bottom top",
  onUpdate: (self) => {
    sectionUniform.progress.value = self.progress; // update uniform
  }
});

// update scene each frame using trigger values
function updateScene() {
  const progress = sectionTrigger.progress;  
  const velocity = sectionTrigger.getVelocity(); 

  // drive camera movement with scroll progress
  camera.position.y = map(progress, 0.75, 1, -0.4, 3.4);
  camera.position.z =
    5 + map(progress, 0, 0.3, -4, 0) +
        map(progress, 0.75, 1, 0, 2) + velocity * 0.01;

  // subtle velocity feedback on ponpon and camera
  ponpon.position.y = ponpon.initialY + velocity * 0.01;
}

Thanks to the Splittext-in-inWe can animate every section title rule as soon as it comes into the picture during scrolling.

// Split the text into lines for staggered animation
const split = new SplitText(titleDomElement, { type: "lines" });
const lines = split.lines;

// Create a timeline for the text animation
const tl = gsap.timeline({ paused: true });

tl.from(lines, {
  x: "100%",
  skewX: () => Math.random() * 50 - 25,
  rotation: 5,
  opacity: 0,
  duration: 1,
  stagger: 0.06,
  ease: "elastic.out(0.7, 0.7)"
});

// Trigger the timeline when scrolling the section into view
ScrollTrigger.create({
  trigger: ".about-section",
  start: "top 60%",
  end: "bottom top",
  onEnter: () => tl.play(),
  onLeaveBack: () => tl.reverse()
});

Page transitions

For the page transitions we wanted them to add a sense of playfulness to the experience, while the navigation would remain spicy and fluent. Each transition is designed to match the atmosphere of the page, so instead of using a single general effect, we have built variations that keep the journey fresh.

Technically, the transitions combine two WebGL scenes with the help of an adapted Shader, where the previous and following pages are displayed and mixed in real time. The animation of the blend is powered by GSAP-TwensWith which we can accurately arrange the timing and progress of the Shader for flowing, responsive transitions.

Design playful experiences

Ponpon Mania has encouraged us to think further than traditional telling stories. It was a pleasure to work on the story and the micro interactions that add playfulness and energy to the strip.

Looking ahead, we intend to create new chapters, to expand the story of Ponpon and introduce small games and interactive experiences within the universe that we have built. We are pleased to continue to explore the world of Ponpon and to share even more surprises with the readers along the way.

Thank you for reading! We hope that you enjoyed discovering the creative journey behind Ponpon Mania and the techniques we used to bring Ponpon’s world to life.

If you want to follow Ponpon, check us up Tick ​​tok or Instagram.

You can also support us Tippee!

Justine Soulie & Patrick Heng