Expanding Image Segments Effect

[_nwh]

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.

https://www.audi.nl/nl/web/nl/modellen/a5/a5-coupe.html

 

Thanks in advance.

[CraigWheatley]

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/