Share Posted September 26, 2020 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: Screen #1 - this is done, see CodePen 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. 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. 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. 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. 1 Link to comment Share on other sites More sharing options...
Share Posted September 26, 2020 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 Link to comment Share on other sites More sharing options...
Author Share Posted September 27, 2020 @Abi Rana Thanks. When would you be able to start? How long would you expect the job to take? Kyle Link to comment Share on other sites More sharing options...
Share Posted September 28, 2020 Hi Kyle, I've sent you an PM please check. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now