Ponpon Mania: How WebGL and GSAP Convey a Comedian Sheep’s Dream to Life

Ponpon Mania is an animated comedian that includes Ponpon, a megalomaniac sheep dreaming of turning into a DJ. We needed to discover storytelling past conventional comics by combining playful interactions, clean GSAP-powered movement, and dynamic visuals. The objective was to create a comic book that feels alive, the place readers have interaction immediately with Ponpon’s world whereas following the narrative. The undertaking advanced over a number of months, shifting from early sketches to interactive prototypes.

About us

We’re Justine Soulié (Artwork Director & Illustrator) and Patrick Heng (Inventive Developer), a inventive duo keen about storytelling by means of visuals and interplay. Justine brings experience in illustration, artwork route, and design, whereas Patrick focuses on inventive growth and interactive experiences. Collectively, we discover methods to make tales extra playful, immersive, and fascinating.

Artwork Course

Our visible route emphasizes clear layouts, daring colours, and playful particulars. From the beginning, we needed the comedian to really feel vibrant and approachable whereas utilizing design to assist the story. On the homepage, we aimed to create a easy, welcoming scene that instantly attracts the person in, providing many interactive components to discover and inspiring engagement from the very first second.

The comedian is usually black and white, offering a easy and hanging visible base. Shade seems selectively, particularly when Ponpon goals of being a DJ and is absolutely immersed in his imagined world, highlighting these key moments and guiding the reader’s consideration. Scroll-triggered animations naturally direct focus, whereas hover results and clickable components invite exploration with out interrupting the narrative movement.

To bolster Ponpon’s connection to music, we designed the navigation to resemble a music participant. Readers transfer by means of chapters as in the event that they had been albums, with every panel functioning like a tune. This construction displays Ponpon’s DJ aspirations, making the studying expertise intuitive, dynamic, and intently tied to the story.

Technical Strategy

Our essential objective was to cut back technical friction so we might dedicate our vitality to refining the inventive route, movement design, and animation of the web site.

We used WebGL as a result of it gave us full inventive freedom over rendering. Though the comedian has a largely 2D look, we needed the flexibleness so as to add depth and apply shader-based results.

Ranging from Justine’s illustrator recordsdata, each layer and visible component from every panel was exported as a person picture. These property had been then packed into optimized texture atlases utilizing Free TexturePacker.

As soon as exported, the photographs had been additional compressed into GPU-friendly codecs to cut back reminiscence utilization. Utilizing the information generated by the packer, we reconstructed every scene in WebGL by producing planes on the appropriate dimension. Lastly, every part was positioned in a 3D scene the place we utilized the required shaders and animations to realize the specified visible results.

Tech Stack & Instruments

Design

• Adobe Photoshop & Illustrator – illustration and asset preparation
• Figma – format and interface design

Improvement

• ogl – WebGL framework for rendering
• Nuxt.js – frontend framework for construction and routing
• GSAP – animation library for clean and exact movement
• Matter.js – physics engine used on the About web page
• Free TexturePacker – for creating optimized texture atlases from exported property
• Tweakpane – GUI instrument for real-time debugging and fine-tuning parameters

Animating utilizing GSAP

GSAP makes it straightforward to animate each DOM components and WebGL objects with a unified syntax. Its timeline system introduced construction to complicated sequences, whereas combining it with ScrollTrigger streamlined scroll-based animations. We additionally used SplitText to deal with textual content animations.

Residence web page

For the homepage, we needed the very very first thing customers see to really feel playful and energetic. It introduces the three essential characters, all animated, and units the tone for the remainder of the expertise. Each component reacts subtly to the mouse: the Ponpon masks deforms barely, balloons collide softly, and clouds drift away in light repulsion. These micro-interactions make the scene really feel tangible and invite guests to discover the world of Ponpon Mania with curiosity and delight. We used GSAP timeline to choreograph the intro animation, permitting us to set off every component in sequence for a clean and cohesive reveal.

// Easy repulsion we used for the clouds in our render perform
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 close to
const radius = 2; // interplay radius
const power = 1.5; // repulsion drive
const repulsion = Math.max(0, 1 - dist / radius) * power;

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

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

place.x += velocity.x;
place.y += velocity.y;

Chapter Choice

For the chapter choice, we needed one thing easy but evocative of Ponpon musical universe. Every chapter is introduced as an album cowl, inviting customers to flick through them as if flipping by means of a document assortment. We attempt to have a clean and intuitive navigation, customers can drag, scroll, or click on to discover and every chapter snaps into place for a simple and satisfying choice expertise.

Panel Animation

For the panel animations, we needed every panel to really feel alive bringing Justine’s illustrations to life by means of movement. We spent numerous time refining each element so that every scene feels expressive and distinctive. Utilizing GSAP timelines made it straightforward to construction and synchronize the completely different animations, preserving them versatile and reusable. Right here’s an instance of a GSAP timeline animating a panel, displaying how sequences will be chained collectively easily.

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

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

perform triggerFlash() {
  const flashes = Math.flooring(Math.random() * 2) + 1; // 1–2 flashes
  const length = 0.4 / flashes;

  flashTimeline.clear();

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

  flashTimeline.play();
}

ponponMeshes.forEach((ponpon, i) => {
  timeline.fromTo(
    ponpon.place,
    { y: ponpon.initialY - 0.2 },  // begin barely beneath
    {
      y: ponpon.initialY,          // bounce up
      length: 1,
      ease: "elastic.out",
      onStart: () => {
        togglePonponGroup(i);      // present energetic group
        triggerFlash();            // set off flash
      }
    },
    i * 1.6 // stagger delay between ponpons
  );
});

About Web page

On the About web page, GSAP ScrollTrigger tracks the scroll progress of every part. These values drive the WebGL scenes, controlling rendering, transitions, and digicam motion. This ensures the visuals keep completely synchronized with the person’s scrolling.

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

// create a ScrollTrigger for one part
const sectionTrigger = ScrollTrigger.create({
  set off: ".about-section",
  begin: "prime backside",
  finish: "backside prime",
  onUpdate: (self) => {
    sectionUniform.progress.worth = self.progress; // replace uniform
  }
});

// replace scene every body utilizing set off values
perform updateScene() {
  const progress = sectionTrigger.progress;  
  const velocity = sectionTrigger.getVelocity(); 

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

  // refined velocity suggestions on ponpon and digicam
  ponpon.place.y = ponpon.initialY + velocity * 0.01;
}

Because of the SplitText plugin, we are able to animate every part title line by line because it comes into view whereas scrolling.

// Cut up the textual content into strains for staggered animation
const break up = new SplitText(titleDomElement, { kind: "strains" });
const strains = break up.strains;

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

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

// Set off the timeline when scrolling the part into view
ScrollTrigger.create({
  set off: ".about-section",
  begin: "prime 60%",
  finish: "backside prime",
  onEnter: () => tl.play(),
  onLeaveBack: () => tl.reverse()
});

Web page transitions

For the web page transitions, we needed them so as to add a way of playfulness to the expertise whereas preserving navigation snappy and fluid. Every transition was designed to suit the temper of the web page so fairly than utilizing a single generic impact, we constructed variations that maintain the journey recent.

Technically, the transitions mix two WebGL scenes collectively utilizing a customized shader, the place the earlier and subsequent pages are rendered and blended in actual time. The animation of the mix is pushed by GSAP tweens, which lets us exactly management the timing and progress of the shader for clean, responsive transitions.

Designing Playful Experiences

Ponpon Mania pushed us to assume past conventional storytelling. It was a pleasure to work on the narrative and micro-interactions that add playfulness and vitality to the comedian.

Trying forward, we plan to create new chapters, increase Ponpon’s story, and introduce small video games and interactive experiences inside the universe we’ve constructed. We’re excited to maintain exploring Ponpon’s world and share extra surprises with readers alongside the best way.

Thanks for studying! We hope you loved discovering the inventive journey behind Ponpon Mania and the methods we used to convey Ponpon’s world to life.

If you wish to comply with Ponpon, examine us out on TikTok or Instagram.

It’s also possible to assist us on Tipeee!

Justine Soulié & Patrick Heng