Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Group of Oceninfo

Image animation, reveal on website load

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

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?

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