Jump to content
GreenSock

Richard1604

complex animations

Recommended Posts

I'm starting to have fun using greensock now that I have a little experience so this morning i have been working on a slightly more complex animation.

The 'plan' is to have a splash screen and after a delay to transition to a main page which was initially hidden.

After than I would ideally  use ScrollTrigger to animate the sub elements onto the page.

 

My query is how to organise the main page content to facilitate this as what I currently have displays all the content  I reveal the div.

 

Not looking for any code, just advice on strategy and how to organise it all. 

See the Pen BaKozdo by rb1604 (@rb1604) on CodePen

Link to comment
Share on other sites

it's amazing what happens given a little bit of time.

I have updated the pen to hide the some of the elements again after revealing the main page.... 

 

Link to comment
Share on other sites

Hey Richard. I'm not quite following what you're trying to do.

 

Normally when people do this sort of thing they

  1. Disable scrolling during the load.
  2. Position the intro/loader content with position: absolute or fixed over top of the normal page content.
  3. When the page is done loading, transition out and then optionally remove the intro/loader content. Enable scrolling.

Does that help?

Link to comment
Share on other sites

Hello zach and thanks for looking at this and responding.

i updated the codepen earlier after my first post and it now does what I had in mind, or at least a simple version of it.
i can now see how to structure a much more complex animation by creating the content and hiding some of the elements using css and classes/ids so that they can be animated later using scroll trigger or whatever.
 

 

Link to comment
Share on other sites

I just got back to this again zach and re-read your comments.

I like you suggestions and will follow them up.

Thanks again.

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