Jump to content


Expanding Image Segments Effect

Moderator Tag

Recommended Posts

Hello everyone,


There is a new Audi video advertisement where the overall image is created by fading in and expanding image segments. I would like to create a similar effect using GSAP. Any thoughts as to how I could create an effect like it would be appreciated.


See the video on this webpage for an example of the effect I'm looking for.



Thanks in advance.

Link to comment
Share on other sites

Hi and welcome to the forums!


This is a very basic example using divs which are selected to create an array of tweens, each in their own timeline which are offset and whatnot:

See the Pen bBeVbK by craigster1991 (@craigster1991) on CodePen


Bear in mind this amount of images would be slow if they were all DOM elements and so I would recommend rendering such a thing to a canvas.


There are probably better ways to sequence them but as my demo above shows having your animating elements (images) in an array is a simple way to stagger the delay of multiple elements.


More information on staggering can be found here: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.