SVG animation - dynamic symbol onClick fetch/populate element - GSAP DRAWSVG

$10-30 CAD

Avslutat

Publicerad

över fem år sedan

$10-30 CAD

Betalning vid leverans

I have a complex SVG i want to use for my portfolio. There are 2 SVGS, one for BEGINNER WEBSITES and one for ADVANCE WEBSITES. Each of the SVGs are separated into two categories, eclipse symbols, and line paths. What I want is for the DRAWSVG script to select a random line paths and randomly draw from point 0 to point 100% then undraw from point 0 to point 100%, then reverse after a random delay or vice versa. Second I want the eclipses to scale in size when hovered over with the mouse cursor. When the use clicks on the symbol for the eclipse it should assign a random portfolio item to that symbol for an extended period of time while populating the portfolio-box with the image of the website design. Keep in mind there are two categories of portfolios... BEGINNER and ADVANCED. Portfolio items should be only displayed based on the category they belong to. I dont want the pictures to be loaded on document load. I want them fetched upon clicking on symbol eclipse and displayed in the element identified by the ID i will disclose to you. If you do a great job we will add more functionality to this and we can work more in the future. Time to deployment and cost are factors for this project. other projects will not have both the same constraints.

Project ID: 18135075

Om projektet

4 anbud

Distansprojekt

Senaste aktivitet fem år sedan

Ute efter att tjäna lite pengar?

E-postadress

Fördelar med att lägga anbud hos Freelancer

Ange budget och tidsram

Få betalt för ditt arbete

Beskriv ditt förslag

Det är gratis att registrera sig och att lägga anbud på uppdrag

4 frilansar lägger i genomsnitt anbud på $269 CAD för detta uppdrag

@mattsrinc

(bid changed to reflect real 2-day investment to this) Hi, there, Matt Sergej here and I can create your desired visualization (24 years a webmaster, 5+ years scripting web animations/charts/visualizations). I understand what you need and can script this for you. It requires a day though (my daily rate is 150 USD). There are several details that such visualization needs: 1. Not mixing SVG and HTML objects. Recommending to have SVG image in the DIV with all precalculated paths in the SVG (that need to be animated "progressively"). And the DIV displayed with proportional dimensions to SVG that would fit in the DIV 100% etc. 2. No issues with images and other data of websites defined in an array. Yes, images can load on demand, with a script fetching them and display in your mentioned portfolio box. 3. Other than lines and circles all other should be regular web page elements (popup window, HTML markup, no SVG image tag etc). Do explain about the paths more, please. I understand a random path should be highlighted and drawn progressively so that involves several paths between circles. Here the lines must be defined well e.g. starting and ending points - and a logic to choose them. Since javascript is needed either way I would use GreenSock library and its DrawSVG plugin that can display progressive path animation easily. For proof of skills, I can provide links tomorrow (UPDATED: sent in privat chat). Your project can be done (UPDATED) this week. Best Regards, Matt

$250 CAD Om 2 dagar