Find Jobs
Hire Freelancers

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

$10-30 CAD

Closed
Posted over 5 years ago

$10-30 CAD

Paid on delivery
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

About the project

4 proposals
Remote project
Active 5 yrs ago

Looking to make some money?

Benefits of bidding on Freelancer

Set your budget and timeframe
Get paid for your work
Outline your proposal
It's free to sign up and bid on jobs
4 freelancers are bidding on average $269 CAD for this job
User Avatar
(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 in 2 days
5.0 (32 reviews)
5.7
5.7
User Avatar
$25 CAD in 1 day
0.0 (0 reviews)
0.0
0.0

About the client

Flag of CANADA
OSHAWA, Canada
5.0
141
Payment method verified
Member since Jul 28, 2014

Client Verification

Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.