Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_nwh

Expanding Image Segments Effect

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.

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

 

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.
×