Page Animation

[iuscare 11 Likes (Newbie)]

Hi there,

 

I just saw this animation and was wondering if this or something similar is possible to build with greensock. I mean, for sure it would be somehow possible, but at the moment I do not know how to create this split width animation on the image. Normally I would try it with different divs, which animate their width von 0 to 100%. But with a background-image I do not know how to realize such an effect. Can anyone give me a hint?

 

https://dribbble.com/shots/3561148-Cover-Animation

[mikel 1,823 Likes (Superhero)]

Hi iuscare,

 

One option is 'clip path': https://css-tricks.com/clipping-masking-css/

 

Here a first draft with tweened clips - based on a pen of Blake Owen:

See the Pen PjKWME by mikeK (@mikeK) on CodePen

 

For other options have a look to the comment of CRAIG: 

 

Try it and put some cream on it ...