5 Small JavaScript/jQuery OR GSAP Animations!

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!

Skills: CSS, HTML, HTML5, Javascript, jQuery / Prototype

See more: wordpress OR javascript OR jquery OR laravel OR css OR woocommerce OR bitcoin OR html OR php, (html) or (css) or (jquery) or (javascript) or (bootstrap), html or js or css or jquery or javascript or bootstrap, 1 To convert the text into typed text as per the sample website. 2. jquery or javascript to be used for the purpose. Approximat, php mysql html(5) css(5) javascript jquery, mapa do brasil interativo html 5 css svg javascript jquery, java developer html5 css3 javascript perl or shell jquery or angular or node german europe jobs, simple web app database, simple web app java repost, simple web app design, javascript jquery small projects, create simple web app, simple web browser using, simple web application using ruby, web animation using java, simple web app ipad, simple web app nokia, iphone web app audio record, simple web app, creating simple web gallery using jsp

About the Employer:
( 2 reviews ) Elkhart, United States

Project ID: #17038470

12 freelancers are bidding on average $150 for this job


//** 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 More

$100 USD in 1 day
(294 Reviews)

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 More

$155 USD in 3 days
(105 Reviews)

Hello, I can start work on your project immediately once you confirm me and i am also open for further discussion if you want. I have 8+ years in web designing & development with good experience in following skil More

$200 USD in 3 days
(45 Reviews)

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.

$555 USD in 3 days
(25 Reviews)

Hello ! thank you for your post. I have read the your description carefully. I have the sufficient experience(more 5 years) in developing of web app/hybrid app(animation, game, drag/drop, editing/processing image, More

$100 USD in 1 day
(19 Reviews)

salad I am not interested in your project due to not honest buget. Thanks for your posing job From Gustav

$155 USD in 3 days
(12 Reviews)

Hi I can make it using [login to view URL] javascript with json library. Please take a look some work [login to view URL] animation Lamp animattion: [login to view URL] carpet: http:// More

$144 USD in 3 days
(2 Reviews)

Hello i can make this animations for you within 2-3 hours. I couldn't see your PDF attachment. So we can talk more on chat. Thanks.

$40 USD in 1 day
(5 Reviews)

I have got experience in the same discipline Worked on various projects Read your one Can work

$46 USD in 3 days
(0 Reviews)

I a beginner. I know HTMML CSS Javascript SQL PHP. I am hardworking and ambitious. I can do your job.

$155 USD in 3 days
(0 Reviews)

I will do the animation in p5.js. I have lot of experience in it! For project you can check my Instagram handle @mechanical_coder

$35 USD in 1 day
(0 Reviews)
$111 USD in 5 days
(0 Reviews)