complex animations

[Richard1604]

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

[Richard1604]

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

 

[ZachSaucier]

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?

[Richard1604]

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.
 

 

[Richard1604]

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

I like you suggestions and will follow them up.

Thanks again.