Open close icon animation

Developer
Amanda Cheung
Size
1,822 Kb
Views
157,872
  1. Open close icon animation Previews
  2. Open close icon animation HTML Codes
  3. Open close icon animation CSS Codes
  4. Open close icon animation JS Codes

How do I make an open close icon animation?

Https://dribbble.com/shots/1621359-Open-Close-Icon-Animation. What is a open close icon animation? How do you make a open close icon animation? This script and codes were developed by Amanda Cheung on 15 November 2022, Tuesday.

Open close icon animation Previews
IQ Test

Open close icon animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Open close icon animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="toggle" viewBox="0 0 80 50"> <line x1="10" y1="10" x2="40" y2="40" /> <line x1="70" y1="10" x2="40" y2="40" />
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Open close icon animation - Script Codes CSS Codes

svg { max-width: 100px; cursor: pointer;
}
line { stroke-width: 8px; stroke-linecap: round; fill: none; stroke: black; transition-duration: .25s; transition-propery: transform;
}
svg.is-open line:first-child { transform: translateX(15px);
}
svg.is-open line:last-child { transform: translateX(-15px);
}

Open close icon animation - Script Codes JS Codes

$("#toggle").click(function() { $(this).toggleClass("is-open");
})
Open close icon animation - Script Codes
Open close icon animation - Script Codes
Home Page Home
Developer Amanda Cheung
Username acacheung
Uploaded November 15, 2022
Rating 3
Size 1,822 Kb
Views 157,872
Do you need developer help for Open close icon animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Amanda Cheung (acacheung) Script Codes
Name
GSAP rising block with reflection
GSAP stagger cheezburger
Multi-step GSAP animation
A Pen by Amanda Cheung
GSAP chomping cheezburger
Transparent tooltip with border
GSAP rising block
Link transition and keyframe animation demo
Dobot wireframe
Why Make Sense - Hot Chip
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!