Closed

Simple animation of an SVG file using Javascript or CSS (NOT FLASH OR EMBEDDED VIDEO)

I've created a website to advertise a mobile app. However there's one section that's beyond my amateur coding abilities. As you can see in the attached photos, I have a data wheel I'd like to animate.

NOT ANIMATED IN FLASH OR AS AN EMBEDDED VIDEO.

Instead I can give you all the assets for this data wheel as an SVG file, and I’d like you to animate the different elements of the SVG either using CSS or a Javascript library such as [url removed, login to view] ([url removed, login to view]) or [url removed, login to view] ([url removed, login to view])

The animation should run something like this:

- Starts looking like [url removed, login to view]

- Holds for a few seconds

- Like the user has tapped on "icon 2" in [url removed, login to view] - the icons shuffle across to the left and the red bar smoothly moves to the position in [url removed, login to view], text changes by fading in and out.

- Hold for a few seconds.

- Like the user has tapped on "icon 3" in [url removed, login to view] - the icons shuffle across to the left and the red bar smoothly moves to the position in [url removed, login to view], text changes by fading in and out.

- Hold for a few seconds.

- Like the user has tapped on "icon 4" in [url removed, login to view] - the icons shuffle across to the left and the red bar smoothly moves to the position in [url removed, login to view], text changes by fading in and out.

- Hold for a few seconds.

- Like the user has tapped on "icon 1" in [url removed, login to view] - the icons shuffle across to the left and the red bar smoothly moves to the position in [url removed, login to view], text changes by fading in and out.

- The animation now loops

It needs to be created to a fixed size e.g. 400 * 400 px, but then it should also be able to rescale to a smaller size for mobile visitors to the website. Which is why I prefer to use SVG.

All I'd be asking for you to deliver would be this animation however you wish, I'll then copy and paste the code you've created into the rest of my website for the app.

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

See more: website css animation, svg 2, mobile app svg icons, library icon, javascript code library, io.js, icons library, icons css, icon in svg, flash animation for video, flash 9 animation, animated video icon, svg user, simple animation, not flash, javascript css animation, javascript animation, embedded s, embedded coding, d animation flash animation, d animated website, d animate, c video library, animation ve, animation javascript

About the Employer:
( 0 reviews ) United Kingdom

Project ID: #6216381

11 freelancers are bidding on average $284 for this job

seekdeveloper

Hi, I have read your post and understood your requirement. I have good experience in handling iOS/Android/Wordpress /Magento/Joomla/Drupal/ HTML5/CSS3/PHP/ Yii framework/Javascript/MySQL/ Kindly go through m More

$515 USD in 5 days
(28 Reviews)
6.8
LIMEXS

Hi Sir, I've checked the attached PDF, and I can do it using jquery if you like. please join me on chat.

$200 USD in 2 days
(16 Reviews)
5.9
JoomlaVogue

Hello Sir, First of all, we would like to tell you how we will initialize the project with you. We insist to follow these steps before you award the project to us: - we(technical team) will review the job and as More

$515 USD in 11 days
(34 Reviews)
5.9
esafeguard

Hello. I'm a JavaScript and HTML5/CSS3 expert with experience in creating interactive applications with maps, charts, graphs and animations (see my portfolio for examples of my work). I have experience working with va More

$333 USD in 5 days
(17 Reviews)
5.2
JinNg

Hi, My name is Jin. I have over 20 years of experience working in IT. Over 10 years in Australia as a contract programmer for companies like NAB, Bosch, etc. I am now based in Malaysia. I am very good at communi More

$250 USD in 2 days
(1 Review)
3.8
raiakanksha49

i'm a devloper of CSS,Javascript,HTMl5,Animation having 5 yrs experienced in these fields, doing so many projects with good review...i read your project its too complex and it takes time to completion ..if you ping me More

$257 USD in 25 days
(4 Reviews)
2.5
san99kar

Hi, IM Sankar, PHP Expert and PHOZO Cms founder, JS& JQuery based UI Design is my passion, please check my profile here to know how well im in jquery and UI design here [url removed, login to view] I can do the a More

$188 USD in 4 days
(3 Reviews)
2.1
durorey

Hi sir I made the hardest part using js html5 css you can see the picture here [url removed, login to view] the progress bar is animated with js I look forward to work for you and I ill do my best More

$166 USD in 3 days
(2 Reviews)
1.4
kwisatch

Hi sounds like an interesting project to practice my CSS3 animation skills. I am interested in front end development with the new opportunities afforded by HTML5, CSS3 and JavaScript libraries like Knockout JS which I More

$155 USD in 3 days
(0 Reviews)
0.0
architectec

Bir öneri henüz sağlanmadı

$250 USD in 10 days
(0 Reviews)
0.0
Gillinc

Hi There, From simple animation to 3D animation, we have done all for our BEST clients. After working several years in the local market we are now offering our services on the online market, we have been producing a More

$300 USD in 3 days
(0 Reviews)
0.0