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 know this might seem like a lot, but remember I JUST need you to code in a couple of animations when these buttons are pressed. The javascript logic is already there, I'm just not very good at web animations. There are already triggers I think for every single button, and the javascript is very clean & organized as much as possible to make this easier. If you've read this please reply with your favorite food so I know you're not a robot.
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!
//** READY TO START RIGHT AWAY AND FINISH IN NEXT 10 HOURS **//
More then 5+ years of experience in Development . Also kindly check our profile we have done over 300 project here on freelancer so very much reliable & fit for your project . Kindly initiate chat.
Hello!
As a professional web developer,I would like to work with you for this project.
I have rich experiences for javascript and jQuery, html, php, css, wordpress, etc...
I'm ready for your project now and will offer perfect result for you.
let's discuss about details of your project and reasonable price for your project.
I can complete your project perfectly on time.
Kindly regards.