SVG animation using SVG and CSS only
- or -
Post a project like this1433
$150
- Posted:
- Proposals: 12
- Remote
- #2819803
- Awarded
3954234924561463048211818730668063728994386403238698593874193397870439807844147771
Description
Experience Level: Expert
Please use this SVG file (https://codepen.io/aentan/pen/jObwBjE) and animate it based on the attached storyboard of how the animation should look. Please code the animation using CSS (transform, keyframe, dash-offset, etc) on the provided SVG. You may deliver the animation as a Codepen pen or a HTML file with embedded CSS.
I think you will need SVG mask to animate the ground and @keyframe and dash-offset to animate the branches.
Example of stroke animation using dash-offset: https://codepen.io/gau/pen/ZWZKxO
Example of masking in SVG: https://codepen.io/shermandye/pen/xxKmbGR
Please DO:
✅ Modify the SVG markup if you need to
✅ Use only CSS for animation
✅ Use Codepen or put it in a HTML file
✅ Use CSS embedded in the if you decide to use a HTML file
Please DON'T
❌ Change the SVG visually (shape, color or size)
❌ Create an animated gif
❌ Do frame-based animation that cycles through many individual images
❌ Use After Effects and Lottie for animation
❌ Use inline CSS
Other requirements
✅ Animation variables like duration should be easily adjustable
Please include in your proposal some background of your skills and experience with SVG and CSS animations.
I think you will need SVG mask to animate the ground and @keyframe and dash-offset to animate the branches.
Example of stroke animation using dash-offset: https://codepen.io/gau/pen/ZWZKxO
Example of masking in SVG: https://codepen.io/shermandye/pen/xxKmbGR
Please DO:
✅ Modify the SVG markup if you need to
✅ Use only CSS for animation
✅ Use Codepen or put it in a HTML file
✅ Use CSS embedded in the if you decide to use a HTML file
Please DON'T
❌ Change the SVG visually (shape, color or size)
❌ Create an animated gif
❌ Do frame-based animation that cycles through many individual images
❌ Use After Effects and Lottie for animation
❌ Use inline CSS
Other requirements
✅ Animation variables like duration should be easily adjustable
Please include in your proposal some background of your skills and experience with SVG and CSS animations.
Voi C.
98% (13)Projects Completed
9
Freelancers worked with
10
Projects awarded
67%
Last project
16 May 2022
Singapore
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies