Image animation, reveal on website load

[Group of Oceninfo 0 Likes (Newbie)]

Hi Everyone, 

 

I saw image animation, reveal on website load, and I am wondering - how they have done? I know that they use TweenMax, but I am not able to figure out how. Can you please drop me some ideas?

 

Image Animation Revel Effect: https://tinyurl.com/homelogoloader

 

Thanks in advance for your help!

See the Pen mdRGmBd by Group-of-Oceninfo (@Group-of-Oceninfo) on CodePen

[akapowl 4,587 Likes (Superhero)]

 

Welcome to the forums @Group of Oceninfo

 

3 hours ago, Group of Oceninfo said:

Can you please drop me some ideas?

 

They are tweening the width of their .slide-1 (that probably overlays the image on the z-axis and is aligned right)  to 0 initially. Then they tween the height of their #introduction to 0. You could do both those tweens sequenced within a simple timeline.

 

I would recommend using the newer GSAP 3 instead of the old TweenMax though.

Give it a shot and let us know if you run into any GSAP related issues along the way.

 

[Group of Oceninfo 0 Likes (Newbie)]

Thank you @akapowl

gsap.timeline() Seems interesting. I've updated my code. Can you please have a look as it's still not working as expected might be missing something?

[akapowl 4,587 Likes (Superhero)]

 

Here you go. This example makes use of a timeline and tweens on width and height instead of x and y

 

See the Pen 11246dff1111c03bd97e6d26db190f25 by akapowl (@akapowl) on CodePen