Jump to content
Search Community

Image animation, reveal on website load

Group of Oceninfo test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Group of Oceninfo changed the title to Image animation, reveal on website load

 

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.

 

  • 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.
×
×
  • Create New...