So I have a very simple web app that will just record a sound with a users microphone, & has the option to play back or download the sound. Functionality it's perfect! I would just like to add in a few small animations.
GreenSock Animation Platform (GSAP) is definitely preferred & I will tip you an extra $10 if you can pull it off using just GSAP.. But at this point any JS animation will work!
I'm uploading both a .zip of the functionality I have, and a PDF of the mockup of what we're looking for as well. Make sure to check them out if you decide to contact me!
So you can see on the PDF that there's a lot of text & styling (such as font-family) that isn't on the example. That's fine, just focus on the animations. So on the second page you can see there's a timer starting from 5. After it counts down to zero it should switch to the 3rd screen, where it counts down from 30 seconds, including an animation of a circle depleting just like is shown on the 3rd screen of the PDF. After this happens, this area should fade out into a simple 'Play' button along with buttons that can both 'Re-record' or 'Submit'.
If you press play, the animation should switch to a 'Pause' icon as shown in the very last page (5) of the PDF. It is okay that the sound file plays from the beginning when you click 'Pause' & then 'Play'.
Remember the functionality is already there! So you don't need to code ANYTHING as far as 're-record' or 'submit' or even pause/play buttons go.
Here's exactly what I need from you:
-After the 'record' button is clicked, countdown starts from 5; immediately after triggering
-A 30 second countdown with
-A circular bar depleting as 0 is approaching (similar to how iOS devices used to display this, check out the 3rd page of the PDF if you're confused)
-After the countdown hits 0 (from 30 seconds) or if the user hits stop, the area should fade out & a 'play' button should appear.
-If you hit 'play', the icon should change to a 'pause'. If you hit 'pause' it should go back to 'play'.
JUST these 5 animations. You don't have to style anything, no buttons, text, nothing else has to match the mockup aside from basically the play/stop/start button.
I would like to pay $40 for this but shoot me your offers. I am on a deadline, and will need this within 6 hours. (2am PST). If you have any questions at all please let me know!
12 freelancers are bidding on average $150 for this job
Hi there. How are you? Thank you for job posting. I have rich experiences in web developing. I can do best job for you. If you desire work with me please contact me.