React + GSAP : SVG + Animation Created From GIF

$10-30 USD

Completed

Posted

9 months ago

$10-30 USD

Paid on delivery

I am seeking to develop a React SVG Component that closely resembles the provided GIF. The implementation will involve utilizing React and GSAP for handling animations. Respond with examples of how you have utilized react and gsap To enhance configurability, I intend to expose the following properties at the top level of the component: 1. Rotation Percentage: This value determines the overall percentage by which the entire component rotates during its movement. 2. Puzzle Slide-out Distance: This property defines how far each puzzle piece moves away from the centerpoint during its bounce. The top piece slide out distance should be separately configurable from the bottom piece slide out distance. 3. Bouncing Angle: The angle at which the puzzle pieces bounce will be modifiable, allowing options like 33% or 45%. 4. Primary, Secondary, and Bouncing Ball Colors For code maintenance and readability, please ensure that the codebase remains well-organized and clean. Whenever possible, create subcomponents to modularize the structure. Specifically: - Main component: BouncingAndRotatingPuzzlePiece - Subcomponent options: PuzzlePieceComponent, BouncingBall Additional Requirements: 1. Strive to create a reusable puzzle piece component. Utilize transformations and rotations for positioning. If necessary for layering, dividing the puzzle piece into multiple objects is acceptable. 2. The width of the puzzle piece should match its height. 3. Aim to generate SVG elements that are concise with minimal points. Prioritize using shapes like rectangles, circles, and simplified paths. 4. Two timeline options are expected: one where the puzzle piece only bounces upon ball impact with the center circle, and another where bouncing starts before the impact, as illustrated in the graphic. 5. Please avoid employing CSS animations; rely exclusively on GSAP for the animation logic. Variations: 1. In the variation, I would like the bottom left and top right puzzle pieces to be the ones responsible for the bouncing animation, rather than the top left and bottom right sections as depicted in the GIF.

Project ID: 37126619

About the project

26 proposals

Remote project

Active 9 mos ago

Looking to make some money?

Email address

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

Awarded to:

@yaroslavdevdev

I understand that you are seeking to develop a React SVG Component that closely resembles the provided GIF. With my extensive experience in software development, I am confident that I can deliver the required solution. My skillset includes knowledge of JavaScript, React.js which will be invaluable to creating the required component. Additionally, I have experience working with both GSAP and SVG which will be useful in creating the required animation functionality from a GIF file. Furthermore, my commitment to quality assurance means that I would strive to create a reusable puzzle piece component as well as ensure codebase remains well-organized and clean. All this while avoidingCSSanimationstokeepcode concise and minimal.

$20 USD in 7 days

5.0

(4 reviews)

3.0

26 freelancers are bidding on average $42 USD for this job

@DezignzBeasT

Welcome, I have gone through your project React + GSAP : SVG + Animation Created From GIF and completely understood the description "I am seeking to develop a React SVG Component that closely resembles t......" etc.., Expert skills in Typescript, SVG, JavaScript, Animation and React.js. AI, PSD, JPEG, PNG, PDF or any Required Format. Served Many clients with similar work at Highest level of Satisfaction. Quickly Check out my Profile: https://www.Freelancer.com/u/DezignzBeasT Got Some References to Share? Lets just have a Quick Chat and Start the Work! Waiting.

$30 USD in 1 day

4.8

(22 reviews)

5.2

@SafinaNoreen

Hello! How are you Matthew M.? I've read the descriptions of your project ''React + GSAP : SVG + Animation Created From GIF'' and consider myself very suitable for this job. I’m an expert of SVG, Typescript, React.js, Animation and JavaScript. As you can see from my previous projects and ratings, You can trust me to complete your project on time and you will experience great satisfaction with me. Also, I am really good at communication skills in English. For more information about me, please refer to my portfolios. https://www.freelancer.com/u/SafinaNoreen I’m ready to discuss your project and start immediately. Looking forward to hearing you back and discussing all details... Thanks

$25 USD in 14 days

5.0

(24 reviews)

4.8

@rogersadalidsal

Dear, Sir. I have read your job description carefully and I am very confident in your project. I have rich experience in HTML, CSS, SVG, Canvas, GSAP, and WebGL. So I can create this svg animation. So I think this job is an ideal match with my skills and experience. I am sure you will be satisfied with my work. Please send me a message so that we can discuss more. Thank you. Rogers.

$30 USD in 1 day

5.0

(4 reviews)

3.8

@coderscreation

Hello, my name is Roland and I am a full-time freelancer specializing in JavaScript, React.js and other web technologies. I understand you are seeking to develop a React SVG Component that closely resembles the provided GIF. With my experience in JavaScript, React.js and other web technologies, I believe I can deliver an outstanding solution that meets all requirements for your project. We aim to provide quick turnarounds, timely updates, budget friendly services as well as customer service when needed. We are confident that our skillset and experience make us the best fit for this project! Please feel free to reach out if you have any questions or would like more information on our services.

$20 USD in 7 days

4.7

(10 reviews)

4.2

@sairusk

React + GSAP : SVG + Animation Created From GIF  DW Solution Online is providing WordPress,E commerce BigCommerce Development Services. WordPress, E-commerce, BigCommerce expert that is backed with 7 years of real-world experience developing great WordPress, E commerce BigCommerce websites. We never delivered a project before it finished as a professional output. So I always used to make my clients happy and glad about my great works. I want to work with you to solve problems and bring your ideas to light. Our team now take any new challenges and deliver the project according to client's requirements. All you need is to explain your idea to us, send us written requirements or share your requirements. Some of the programming languages are mentioned below: Skills: ASP.NET/MSSQL, C#, VB.NET, PHP/MySQL, WordPress, Joomla, OsCommerce, OpenCart, CS-Cart, WooCommerce, Drupal, Magento, CodeIgniter. We're always here to help you, Please write me back for further details. Thanks My Services WordPress Installation and Setup, Theme Customization, Plugin Installation and Configuration, Content Creation and Management, Troubleshooting and Maintenance, Custom Theme and Plugin Development, Search Engine Optimization (SEO),Security, Performance Optimization Skills: Typescript, JavaScript, React.js, SVG and Animation

$10 USD in 5 days

4.7

(18 reviews)

3.7

@TosheStojev

Project Title: React + GSAP: Quirky SVG Animation Expertise at Your Service! Project Description: Hey there, dear client! Are you ready to add a touch of quirkiness to your React project? Look no further! I'm here to create a mind-boggling SVG animation that will leave your users in awe. Using the power of React and GSAP, I will bring your provided GIF to life. But wait, there's more! I understand the importance of customization, so I'll make sure to expose all the necessary properties for you to tweak and fine-tune the animation to your heart's content. From the rotation percentage to the puzzle slide-out distance, I've got you covered. And let's not forget about the bouncing angle and the vibrant colors of the primary, secondary, and bouncing balls. We'll make sure your animation is as eye-catching as it gets! But it doesn't stop there. I'm all about clean and organized code, so I'll create modular subcomponents to keep everything tidy. We'll have a main component for the bouncing and rotating puzzle piece, along with subcomponents for the individual puzzle pieces and the bouncing ball. Oh, and did I mention that we'll be working with concise SVG elements? No messy code here! And don't worry, I won't rely on CSS animations. GSAP will be our one and only animation logic superhero. If you're up for a variation, I'm more than happy to switch things up and have the bottom left and top right puzzle pieces take the spotlight in the bouncing animation. Let's add that extra touch of uniqueness! So, dear client, let's bring your project to life with a dash of humor and a whole lot of quirkiness. Let's chat further to discuss pricing and timeline details. Looking forward to working with you! Best regards,

$18 USD in 7 days

4.8

(3 reviews)

3.6

@navuabdul20

Dear Matthew M. I am confident that my expertise and experience in the field of 3D modeling, and about React + GSAP : SVG + Animation Created From GIF 3D animation, and illustration using software like Photoshop make me the ideal candidate for your project. With over 8 years of professional experience in the industry, I have developed a deep understanding of 3D design principles and techniques. I have worked on various projects that involve creating high-quality 3D models, animations, and illustrations. My portfolio, which can be found at https://www.freelancer.com/u/navuabdul20 , showcases my past work and demonstrates my ability to meet and exceed client expectations in SVG, Animation, React.js, JavaScript and Typescript In terms of deliverables, I guarantee that you will receive all the necessary source and raw files for print, including AI, EPS, JPG, PDF, PNG, TIFF, video files, I firmly believe in providing my clients with complete ownership and control over their designs, and once the final design is approved, you will have all the copyrights. Thank you for considering my proposal for your 3D work. I look forward to the opportunity to work with you and create something truly remarkable. Please feel free to reach out to me at your convenience, and I will be more than happy to address any questions or concerns you may have. Best regards, Neveen Abdul

$100 USD in 5 days

5.0

(4 reviews)

3.2

@amilinaresram

Hello, Your assignment is not difficult for me. It's just a matter of clarifying the algorithm. I'm trying to solve that problem as follows. Divide the circle into 4 sections and operate on the two segments of the fan shape. For the two segments, draw a small sector with radius r at the center. Instead of making only one shape, we want to create four shapes in one cycle. The timer runs at the following time intervals. Next, we want to move the two figures in the diagonal direction away from each other, and rotate the other two figures in the diagonal direction about 45 degrees to the left. I can complete your assignment in this way. I can perfectly complete your project for 1 day. Looking forward for your response. Thanks.

$20 USD in 7 days

5.0

(2 reviews)

2.5

@Danielkurt

Good day. As I've rich experiences in React.js, Typescript, JavaScript, Animation and SVG, so I can meet your requirements. I'm ready to discuss the details and start working. Thank you

$10 USD in 2 days

5.0

(3 reviews)

2.0

@Dinfo12

Hello, I am ASHISH and I am excited to hear about your project! With over 8 years of programming experience, I am confident that I can deliver the perfect solution for your project - specifically, a React SVG Component that closely resembles the provided GIF. My extensive experience in React and GSAP make me an ideal candidate for this task. Additionally, my daily progress reports/updates via Skype (Google Talk, Freelancer or email), as well as providing files back up for changes, ensure that projects are delivered on time without any issues. Plus, I strive to create reusable components whenever possible to reduce code maintenance efforts. I understand how important it is to keep codebase well-organized and clean, so I will do my best to avoid any issues related to this while working on your project. Moreover, two timeline options are expected - one where the puzzle piece only bounces upon ball impact with the center circle and another where bouncing starts before impact to provide a greater degree of customization.

$200 USD in 7 days

5.0

(2 reviews)

1.8

@sonishubham

Hey dear! I have read your description carefully and I am sure what you mean. I have expertise in Wordpress, Laravel framework, Html, CSS, PHP, Javascript, Ajax and Mysql for 8+ years. I have done many projects in these fields, so I can provide you the perfect result for you and I am confident to deliver 100% total satisfaction to you. Please invite me so that we can discuss more details over chat. Looking forward to hearing from you. Thanks, best regards.

$30 USD in 7 days

1.5

(4 reviews)

4.4

@Master89921

Hello Mate!Greetings Matthew M., Good evening! I’ve carefully checked your requirements and really interested in this job. I’m full stack node.js developer working at large-scale apps as a lead developer with U.S. and European teams. I’m offering best quality and highest performance at lowest price. I can complete your project on time and your will experience great satisfaction with me. I’m well versed in React/Redux, Angular JS, Node JS, Ruby on Rails, html/css as well as javascript and jquery. I have rich experienced in Animation, SVG, React.js, Typescript and JavaScript. For more information about me, please refer to my portfolios. I am checking your attachment, I'll update you shortly... I’m ready to discuss your project and start immediately. Looking forward to hearing you back and discussing all details.. Many thanks

$10 USD in 3 days

5.0

(1 review)

1.5

@Mariia1302

✅ Hello!✅ May I ask how you are? I want to convey my passion for your project and my ability to manage it. I fully believe in our ability to run your project smoothly and effectively. I am ready to start working immediately and appreciate the opportunity to discuss the details with you. Please grant me permission to start a conversation to learn more about project details. ❤️Masha❤️.

$20 USD in 7 days

0.0

(0 reviews)

0.0

@lincolnwriter

Hi Matthew M.! I am excited to submit my bid for your project. With a solid background in software development and expertise in Typescript, React.js, SVG, JavaScript and Animation, I am confident that I can deliver high-quality and efficient solutions. I have a proven track record of successfully completing similar projects on time and within budget. Additionally, I prioritize effective communication, ensuring that your vision is accurately translated into the final product. I am dedicated to providing exceptional service and exceeding your expectations. Thank you for considering my bid, and I look forward to discussing your project further. Best regards, Lincoln

$50 USD in 1 day

0.0

(0 reviews)

0.0

@solomiiahuliak

⭐⭐⭐Hello Matthew M. Good afternoon!⭐⭐⭐ I am excited to submit my proposal for the "React + GSAP : SVG + Animation Created From GIF" position. I have developed a strong set of skills that make me confident in my ability to deliver high-quality work to your project. My approach to any project is to first gain a deep understanding of the client's needs and requirements. I will work closely with you to ensure that I understand your project goals and objectives, and that I am able to deliver results that meet or exceed your expectations. In terms of technical skills, I have extensive experience in JavaScript, React.js, SVG, Animation and Typescript. I am checking your attachment, I'll update you shortly... Please send a message to discuss more about this project. Your Sincerely. ❤️Solomiia❤️

$50 USD in 4 days

5.0

(1 review)

0.1

@hitcdlmgec

I have over 3 years of experience in IT Industry during this period I also experienced React.js and React Native Hybrid App Development (Components, React SVG, Hooks, States, Redux, Redux saga middleware, Context API, Fetch, Axios etc.) with Typescript. I can help/develop your project with better structure and guidance. Thanks & Regards Hitesh Sharma

$30 USD in 7 days