5 step animated section needed

[kylerumble 2 Likes (Newbie)]

Well, I've attempted this myself, but I'm struggling too much.

 

I'm new to GSAP and animations. And I've reached a point where I need help. 

 

Files attached:

https://www.dropbox.com/sh/yrhq6gj6j8rlyrh/AAAtGV0UVkgmpko7CQs_lxlua?dl=0

screen-1.jpg
screen-2.jpg
screen-3.jpg
screen-4.jpg
screen-5.jpg
arc.min.svg

 

Here is a codepen of where I have gotten so far: 

See the Pen mdPvvoP by kylerumble (@kylerumble) on CodePen

 

I'll do my best to describe what is needed. 

 

Let's call this a "Hero" section" that starts as a group of circles, and finishes as a background image with the centered text that has a curved bottom. 

 

Steps:

 

1. Screen #1 - this is done, see CodePen
2. Screen #2 - this is also done already, see Codepen. I would however like to have text added to the outer circles as seen in screen #1. I found positioning text a bit cumbersome. 
3. Screen #3 - red inner circle grows and covers the section. And there is a bottom arc that needs to be part of the animation as well. I've attached the arc as it has to match that aspect ratio. Something like this would be amazing if possible 

   See the Pen QWyLVLO by osublake (@osublake) on CodePen

    as it would include step #5 and if it could also incorporate Step 4 at the same time im guessing. 
4. Screen 4 the section shrinks in height and positions itself at the top. this is where we get the correct size of the hero established. It would be great if i could manually adjust values for this height. 
5. Screen #5 - background image fades in. This background image will have a pseudo element on top of it which has the overlay style. the background image will be part of the markup, and easily changed. The overlay just makes it look red. So any image can be used for testing, and just use a .5 transparency on the overlay for a working example. 

 

Additional notes, you can see at the bottom of screen #1 and screen #5 there is a section below. I'll need next section to animate back up into position in screen #5 similar to how it was in screen #1. I need to close that space after the animations. 

 

And this needs to be done without premium plugins if possible.

 

Budget:

 

I'm not at all sure how long this will take.  Will $400 cover this? I respect professional services, so I realize I'll be paying for quality. 

 

Timeline: Tomorrow, Monday, Tuesday? sorry its a bit of a rush job if possible. 

 

[Abi Rana 10 Likes (Newbie)]

Hi there, I'm interested to work on this. But I've quite a tight schedule right now, so I won't be able to work on this in couple days.

 

So I just wanted to inform you that if anyone else would work on this then great. But if someone could not manage then and if you would still be looking for it then do let me know.

 

Regards,

Abi Rana

info@abirana.com

[kylerumble 2 Likes (Newbie)]

@Abi Rana

 

Thanks.

 

When would you be able to start? How long would you expect the job to take?

 

Kyle

[Abi Rana 10 Likes (Newbie)]

Hi Kyle, I've sent you an PM please check.