Signpost rotation animation

Developer
Anya Craig
Size
3,107 Kb
Views
36,432
  1. Signpost rotation animation Previews
  2. Signpost rotation animation HTML Codes
  3. Signpost rotation animation CSS Codes
  4. Signpost rotation animation JS Codes

How do I make an signpost rotation animation?

This uses Snap.svg to animate a rotation in signs on an SVG signpost.. What is a signpost rotation animation? How do you make a signpost rotation animation? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Signpost rotation animation Previews
IQ Test

Signpost rotation animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Signpost rotation animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Click the signpost to trigger the animation</h1>
<div class="wrapper"> <svg id="signpost_svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 272"> <g id="signpost_group"> <path id="signpost_path_1" d="M93.58,157.25V260.81a11.16,11.16,0,1,1-22.32,0V157.25Z" /> <path id="signpost_path_2" d="M93,102.4H70.65V77H92A.93.93,0,0,1,93,78Z"/> <path id="signpost_path_3" d="M0,49.1a4.61,4.61,0,0,1,1.83-3.48L19,31.56a9.16,9.16,0,0,1,6.16-2H122.7a5.34,5.34,0,0,1,5,5.57V63.06a5.34,5.34,0,0,1-5,5.57H25.18a9.16,9.16,0,0,1-6.16-2L1.83,52.58A4.61,4.61,0,0,1,0,49.1Z"/> <path id="signpost_path_4" d="M164,130.33a4.49,4.49,0,0,1-2,3.48l-19,14a10.84,10.84,0,0,1-6.81,2H28.33a5.58,5.58,0,0,1-5.56-5.57V116.36a5.58,5.58,0,0,1,5.56-5.57H136.16a10.84,10.84,0,0,1,6.81,2l19,14a4.49,4.49,0,0,1,2,3.49Z" /> <path id="signpost_path_5" d="M70.65,11.19a11.16,11.16,0,1,1,22.32,0v10H70.65Z" /> </g> </svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Signpost rotation animation - Script Codes CSS Codes

.wrapper { width: 10%; margin: 0 auto;
}
svg { fill: indigo;
}
h1 { text-align: center;
}

Signpost rotation animation - Script Codes JS Codes

// THE SNAP.SVG ANIMATION
$(".wrapper").on("click", function(){ animateSvg(); // alert("working");
}); function animateSvg(){ // the paths var path1 = Snap('#signpost_path_1'); var path2 = Snap('#signpost_path_2'); var path3 = Snap('#signpost_path_3'); var path4 = Snap('#signpost_path_4'); var path5 = Snap('#signpost_path_5'); // We need to rotate from the centre of each sign, so here, we calculate that and set it as a variable var bboxTopSign = path3.getBBox(); //bounding box, centre cx/cy var bboxBottomSign = path4.getBBox(); //bounding box, centre cx/cy // the starting svg coordinates var path1Stage1Coords = "M93.58,157.25V260.81a11.16,11.16,0,1,1-22.32,0V157.25Z"; var path2Stage1Coords = "M93,102.4H70.65V77H92A.93.93,0,0,1,93,78Z"; var path3Stage1Coords = "M0,49.1a4.61,4.61,0,0,1,1.83-3.48L19,31.56a9.16,9.16,0,0,1,6.16-2H122.7a5.34,5.34,0,0,1,5,5.57V63.06a5.34,5.34,0,0,1-5,5.57H25.18a9.16,9.16,0,0,1-6.16-2L1.83,52.58A4.61,4.61,0,0,1,0,49.1Z"; var path4Stage1Coords = "M164,130.33a4.49,4.49,0,0,1-2,3.48l-19,14a10.84,10.84,0,0,1-6.81,2H28.33a5.58,5.58,0,0,1-5.56-5.57V116.36a5.58,5.58,0,0,1,5.56-5.57H136.16a10.84,10.84,0,0,1,6.81,2l19,14a4.49,4.49,0,0,1,2,3.49Z"; var path5Stage1Coords = "M70.65,11.19a11.16,11.16,0,1,1,22.32,0v10H70.65Z"; // the svg coordinates for the second stage of animation var path1Stage2Coords = "M93.58,157.25V260.81a11.16,11.16,0,1,1-22.32,0V163.09Z"; var path2Stage2Coords = "M93,102.4l-22.32,5.36V77l21.88,6.56a.62.62,0,0,1,.44.59Z"; var path3Stage2Coords = "M2.79,30.43a4.61,4.61,0,0,1,2.77-2.8L26.1,19.22a9.16,9.16,0,0,1,6.47-.11l93.26,28.51a5.34,5.34,0,0,1,3.18,6.8l-4.08,13.36-4.08,13.36A5.34,5.34,0,0,1,114.42,85L21.15,56.47a9.16,9.16,0,0,1-5.3-3.72L3.52,34.29a4.61,4.61,0,0,1-.73-3.87Z"; var path4Stage2Coords = "M162.46,115.65a4.49,4.49,0,0,1-1.26,3.83l-15.67,17.69a10.84,10.84,0,0,1-6.25,3.38L33.81,163a5.58,5.58,0,0,1-6.59-4.3L24.31,145l-2.9-13.66a5.58,5.58,0,0,1,4.28-6.61l105.48-22.42a10.84,10.84,0,0,1,7.08.54l21.51,9.79a4.49,4.49,0,0,1,2.7,3Z"; var path5Stage2Coords = "M70.65,11.19a11.16,11.16,0,1,1,22.32,0V27.94L70.65,21.16Z"; // path 1 animation path1.animate({ d: path1Stage2Coords }, 1000, mina.easeout, function(){ path1.animate({ d: path1Stage1Coords }, 1000, mina.bounce); }); // path 2 animation path2.animate({ d: path2Stage2Coords }, 1000, mina.easeout, function(){ path2.animate({ d: path2Stage1Coords }, 1000, mina.bounce); }); // path 3 animation (top sign) path3.animate({ transform: "r18," + bboxTopSign.cx + ',' + bboxTopSign.cy}, 1000, mina.easeout, function(){ path3.animate({ transform: "r0," + bboxTopSign.cx + ',' + bboxTopSign.cy}, 1000, mina.bounce); }); // path 4 animation (bottom sign) path4.animate({ transform: "r-16," + bboxBottomSign.cx + ',' + bboxBottomSign.cy}, 1000, mina.easeout, function(){ path4.animate({ transform: "r0," + bboxBottomSign.cx + ',' + bboxBottomSign.cy}, 1000, mina.bounce); }); //path 5 animation path5.animate({ d: path5Stage2Coords }, 1000, mina.easeout, function(){ path5.animate({ d: path5Stage1Coords }, 1000, mina.bounce); }); }
Signpost rotation animation - Script Codes
Signpost rotation animation - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 3
Size 3,107 Kb
Views 36,432
Do you need developer help for Signpost rotation 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!

Anya Craig (AnyaCraig) Script Codes
Name
Simple Responsive Gallery
Leaf animation with Snap.svg on scroll-by
Text with Background Gradients and Text-Shadows
Responsive Square with Background Image
Flex Baseline Test
Overlay Hover Effect
Animating background foofs
Fair to Foul
Fancy Two-Border Buttons
Responsive Image Height Test
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!