Banner Ad with Animated Clippath Slides

Image: Banner Ad with Animated Clippath Slides GIF

Here are multiple banner ad designs by Codepen user halvves. In here we have 2 variations for 300×250, 728×90, 160×600 and 320×50 ads where you have some nice slide transitions between images and text copy to deliver a powerful message.

300×250 Banner Variation A Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – A (300Γ—250) by halvves (@halvves) on CodePen.default


300×250 Banner Variation B Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – B (300Γ—250) by halvves (@halvves) on CodePen.default


728×90 Banner Variation A Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – A (728Γ—90) by halvves (@halvves) on CodePen.default


728×90 Banner Variation B Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – B (728Γ—90) by halvves (@halvves) on CodePen.default


160×600 Banner Variation A Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – A (160Γ—600) by halvves (@halvves) on CodePen.default


160×600 Banner Variation B Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – B (160Γ—600) by halvves (@halvves) on CodePen.default


320×50 Banner Variation A Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – A (320Γ—50) by halvves (@halvves) on CodePen.default


320×50 Banner Variation B Snippet

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen GSAP Banner Ad – Animating Clippath – B (320Γ—50) by halvves (@halvves) on CodePen.default

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.