GSAP-powered keyframe timeline with entry and exit animations, easing curves, and frame-accurate playback for rich HTML5 ad production.
A visual timeline at the bottom of the editor shows every layer as a row with diamond-shaped keyframe markers. Drag keyframes to adjust timing, click between them to add new property changes, and use the playhead to scrub through the animation in real time. Each keyframe can animate position, scale, rotation, opacity, colour, and more — all rendered by GSAP for buttery smooth playback.
Choose from 9 entry presets (fade in, slide from left/right/top/bottom, scale up, bounce, blur in, rotate in) and 9 matching exit presets. Each preset is configurable — adjust duration, delay, and easing independently. Entry animations fire on timeline start, exit animations fire before the banner loops or ends. This makes building "intro → hold → outro" sequences fast and intuitive.
Select from 30+ easing functions — linear, ease-in, ease-out, ease-in-out, plus GSAP-specific curves like back, elastic, bounce, and power curves (power1 through power4). Preview each curve visually before applying. The right easing choice transforms a mechanical-feeling animation into one that feels natural and polished, critical for ad creative that needs to catch attention in the first half-second.
Preview all formats simultaneously in a single modal. Each artboard animates in sync so you can verify that your 300x250, 728x90, and 160x600 all look correct before exporting. Pause, rewind, and step frame-by-frame. This eliminates the tedious process of previewing each format individually and catching timing mismatches late in production.