Animating SVG With GreenSock
How do I make an animating svg with greensock?
Https://ihatetomatoes.net/how-to-animate-svg-with-greensock/Ihatetomatoes YouTube videos animation recreated using SVG and GreenSock.. What is a animating svg with greensock? How do you make a animating svg with greensock? This script and codes were developed by Petr Tichy on 07 September 2022, Wednesday.
Animating SVG With GreenSock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating SVG With GreenSock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="intro"> <div id="logo"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ihtLogo" x="0" y="0" viewBox="0 0 308.8 152.1" xml:space="preserve" enable-background="new 0 0 308.8 152.1"> <style> .tomatoLeft, .tomatoRight{ fill:#D74022; } .bracketLeft, .bracketRight{ fill:#4D4D4F; } .s2{ fill:none; stroke-linecap:round; stroke-miterlimit:10; stroke-width:10; stroke:#FFF; } .tomatoLeaves{ fill:#95D600; } </style> <polygon points="238.3 152.1 225.6 139.3 283.4 81.5 225.6 23.8 238.3 11 308.8 81.5 " class="bracketRight"/> <polygon points="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/> <g id="tomato"> <path d="M139.7 17.2C106 18.3 78.6 45.7 77.5 79.4 76.9 98 84.2 114.9 96.3 127l91-91C175.2 23.9 158.3 16.6 139.7 17.2z" class="tomatoLeft"/> <path d="M122.3 127c12.1 12.1 29 19.4 47.6 18.8 33.7-1.1 61.1-28.5 62.2-62.2 0.6-18.6-6.7-35.5-18.8-47.6L122.3 127z" class="tomatoRight"/> <path d="M128.6 10.9c0-1.5 0-3 0.1-4.5 0.1-1.4 0.8-3.1 0.3-4.5 -0.8-2.5-4.3-2.6-5.5-0.3 -1.8 4.5-2.5 9.2-2.4 14 -6.7 3.2-17 2-24-0.2 5.1 4 11.2 6.7 18 7.5 -6.5 3-12.5 7-17.6 11.9 13.7-9.2 32.4-7.6 44.4 3.7 -1.3-4.6-3.5-8.7-6.4-12.3 7.3-5.2 16.3-7.4 25.1-6.3 -7-2.1-14.2-3-21.5-2.8 3.2-2.1 6-4.7 8.3-7.7 -6.3 3.5-11.4 4.1-18.5 4.4C128.8 13.2 128.7 11.6 128.6 10.9" class="tomatoLeaves"/> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ihtText" x="0" y="0" viewBox="0 0 148.2 23" enable-background="new 0 0 148.2 23" xml:space="preserve"> <path fill="#D74022" d="M5.3 18.5V19H3.7h-1H1.1v-0.4c0-0.2 0.1-0.4 0.4-0.4 0 0 0.1 0 0.1 0 0.1 0 0.2 0 0.4 0 0.2 0 0.4 0 0.7 0V8.9c-0.2 0-0.4 0-0.5 0 -0.2 0-0.3 0-0.3 0 -0.1 0-0.1 0-0.2 0 0 0-0.1 0-0.1 0 -0.3 0-0.4-0.1-0.4-0.4V8h1.6 1v10.1c0.2 0 0.4 0 0.5 0 0.2 0 0.3 0 0.3 0 0.1 0 0.1 0 0.2 0 0 0 0.1 0 0.1 0C5.2 18.1 5.3 18.3 5.3 18.5zM2.3 4.6C2.3 4.5 2.2 4.4 2.2 4.2c0-0.1 0-0.3 0.1-0.4 0.1-0.1 0.1-0.2 0.2-0.3 0.1-0.1 0.2-0.2 0.3-0.2s0.2-0.1 0.4-0.1c0.1 0 0.3 0 0.4 0.1 0.1 0.1 0.2 0.1 0.3 0.2C4 3.6 4.1 3.7 4.1 3.9 4.2 4 4.2 4.1 4.2 4.2c0 0.1 0 0.3-0.1 0.4C4.1 4.7 4 4.8 3.9 4.9 3.8 5 3.7 5.1 3.6 5.1 3.5 5.2 3.3 5.2 3.2 5.2c-0.1 0-0.3 0-0.4-0.1S2.6 5 2.5 4.9 2.4 4.7 2.3 4.6z"/> <path fill="#D74022" d="M14.9 7.6c1.2 0 2.1 0.4 2.8 1.2 0.6 0.8 1 1.8 1 3.1v5.5c0.7 0.1 1.1 0.2 1.3 0.3 0.2 0 0.3 0.2 0.3 0.4V19h-3.5v-7.1c0-1.8-0.8-2.7-2.3-2.7 -1.1 0-2.1 0.5-3 1.6v6.6l0.3 0.1c0.6 0.1 0.9 0.2 1 0.2 0.2 0 0.3 0.2 0.3 0.4V19H7.8V18c0-0.2 0.1-0.4 0.3-0.4l1.3-0.3v-13C8.5 4.2 8 4.1 7.9 4.1c-0.2 0-0.3-0.2-0.3-0.4V2.7h3.8v6.6C12.4 8.2 13.6 7.6 14.9 7.6z"/> <path fill="#D74022" d="M32.2 18v0.9h-1.4 -0.2 -0.7c-0.2 0-0.3 0-0.5-0.1 -0.1-0.1-0.2-0.2-0.2-0.4l-0.2-1c-0.3 0.3-0.6 0.5-0.9 0.7 -0.3 0.2-0.6 0.4-0.9 0.5 -0.3 0.1-0.6 0.3-1 0.3 -0.3 0.1-0.7 0.1-1.2 0.1 -0.4 0-0.8-0.1-1.2-0.2s-0.7-0.3-1-0.5c-0.3-0.2-0.5-0.5-0.7-0.9C22 17.1 22 16.6 22 16.1c0-0.4 0.1-0.9 0.4-1.3 0.2-0.4 0.6-0.8 1.2-1.1s1.2-0.6 2.1-0.8c0.9-0.2 1.9-0.3 3.2-0.3v-0.9c0-0.9-0.2-1.5-0.6-2 -0.4-0.4-0.9-0.7-1.6-0.7 -0.5 0-0.9 0.1-1.2 0.2s-0.6 0.3-0.8 0.4c-0.2 0.2-0.4 0.3-0.6 0.4 -0.2 0.1-0.3 0.2-0.5 0.2 -0.1 0-0.2 0-0.3-0.1 -0.1-0.1-0.2-0.2-0.2-0.3l-0.4-0.6c0.6-0.6 1.3-1 2-1.3 0.7-0.3 1.5-0.4 2.4-0.4 0.6 0 1.2 0.1 1.7 0.3 0.5 0.2 0.9 0.5 1.2 0.9 0.3 0.4 0.6 0.8 0.7 1.3 0.2 0.5 0.3 1.1 0.3 1.7v5.6c0.3 0.1 0.9 0.2 1.1 0.2C32 17.6 32.2 17.8 32.2 18zM28.8 13.9c-0.9 0-1.7 0.1-2.3 0.2 -0.6 0.1-1.1 0.3-1.5 0.4 -0.4 0.2-0.7 0.4-0.9 0.7s-0.3 0.5-0.3 0.8c0 0.3 0 0.5 0.1 0.8s0.2 0.4 0.4 0.5c0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.5 0.1 0.7 0.1 0.3 0 0.7 0 0.9-0.1 0.3-0.1 0.6-0.2 0.8-0.3 0.3-0.1 0.5-0.3 0.7-0.5 0.2-0.2 0.5-0.4 0.7-0.6V13.9z"/> <path fill="#D74022" d="M35.5 18.4c-0.5-0.5-0.7-1.2-0.7-2.1V9.4h-1.3c-0.1 0-0.2 0-0.3-0.1S33 9.2 33 9V8.2L34.8 8l0.5-3.4c0-0.1 0.1-0.2 0.1-0.3s0.2-0.1 0.3-0.1h1V8h3.2v1.4h-3.2v6.7c0 0.5 0.1 0.8 0.3 1 0.2 0.2 0.5 0.3 0.9 0.3 0.2 0 0.4 0 0.5-0.1 0.2-0.1 0.3-0.1 0.4-0.2 0.1-0.1 0.2-0.1 0.3-0.2s0.1-0.1 0.2-0.1c0.1 0 0.2 0.1 0.3 0.2l0.6 0.9c-0.3 0.3-0.7 0.6-1.2 0.7 -0.5 0.2-1 0.3-1.5 0.3C36.6 19.1 35.9 18.9 35.5 18.4z"/> <path fill="#D74022" d="M48.4 8c0.6 0.2 1.1 0.5 1.5 1s0.7 0.9 1 1.6c0.2 0.6 0.3 1.3 0.3 2.1 0 0.3 0 0.5-0.1 0.6 -0.1 0.1-0.2 0.2-0.4 0.2h-7.4c0 0.7 0.1 1.3 0.3 1.8 0.2 0.5 0.4 1 0.7 1.3 0.3 0.3 0.7 0.6 1.1 0.8 0.4 0.2 0.9 0.3 1.4 0.3 0.5 0 0.9-0.1 1.3-0.2 0.4-0.1 0.7-0.2 0.9-0.4 0.3-0.1 0.5-0.3 0.6-0.4 0.2-0.1 0.3-0.2 0.4-0.2 0.2 0 0.3 0.1 0.4 0.2l0.5 0.7c-0.2 0.3-0.5 0.5-0.9 0.8 -0.3 0.2-0.7 0.4-1.1 0.5 -0.4 0.1-0.8 0.2-1.2 0.3 -0.4 0.1-0.8 0.1-1.2 0.1 -0.8 0-1.5-0.1-2.1-0.4 -0.6-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1.1-1.1-1.9 -0.3-0.7-0.4-1.6-0.4-2.6 0-0.8 0.1-1.5 0.4-2.2s0.6-1.3 1-1.8 1-0.9 1.6-1.2c0.6-0.3 1.4-0.4 2.2-0.4C47.2 7.6 47.8 7.7 48.4 8zM44.4 9.9c-0.5 0.5-0.9 1.3-1 2.3h6.1c0-0.5-0.1-0.9-0.2-1.2 -0.1-0.4-0.3-0.7-0.6-1 -0.2-0.3-0.5-0.5-0.9-0.6s-0.7-0.2-1.2-0.2C45.7 9.1 44.9 9.3 44.4 9.9z"/> <path fill="#D74022" d="M55 18.3c-0.5-0.6-0.8-1.3-0.8-2.3V9.7h-1.1c-0.1 0-0.3 0-0.4-0.1s-0.2-0.2-0.2-0.4V8.1l1.8-0.3 0.6-3.1c0-0.1 0.1-0.3 0.2-0.3 0.1-0.1 0.2-0.1 0.4-0.1H57v3.6h3v1.9h-3v6.1c0 0.4 0.1 0.6 0.3 0.8 0.2 0.2 0.4 0.3 0.7 0.3 0.2 0 0.3 0 0.4-0.1s0.2-0.1 0.3-0.1c0.1 0 0.2-0.1 0.2-0.1 0.1 0 0.1-0.1 0.2-0.1 0.1 0 0.1 0 0.2 0.1 0.1 0 0.1 0.1 0.2 0.2l0.8 1.3c-0.4 0.3-0.9 0.6-1.4 0.7 -0.5 0.2-1 0.3-1.6 0.3C56.3 19.1 55.6 18.9 55 18.3z"/> <path fill="#D74022" d="M69 7.9c0.7 0.3 1.3 0.7 1.8 1.2 0.5 0.5 0.9 1.1 1.1 1.8s0.4 1.5 0.4 2.4c0 0.9-0.1 1.7-0.4 2.4s-0.6 1.3-1.1 1.8 -1.1 0.9-1.8 1.2 -1.5 0.4-2.3 0.4 -1.6-0.1-2.3-0.4 -1.3-0.7-1.8-1.2c-0.5-0.5-0.9-1.1-1.1-1.8s-0.4-1.5-0.4-2.4c0-0.9 0.1-1.7 0.4-2.4s0.6-1.3 1.1-1.8c0.5-0.5 1.1-0.9 1.8-1.2s1.5-0.4 2.3-0.4C67.6 7.5 68.3 7.6 69 7.9zM68.8 16.1c0.5-0.6 0.7-1.6 0.7-2.8 0-1.2-0.2-2.1-0.7-2.8s-1.1-1-2.1-1c-1 0-1.7 0.3-2.1 1 -0.5 0.6-0.7 1.6-0.7 2.8 0 1.2 0.2 2.1 0.7 2.8 0.5 0.6 1.2 1 2.1 1C67.7 17 68.3 16.7 68.8 16.1z"/> <path fill="#D74022" d="M92.7 17.7V19H91h-2.7v-7.2c0-0.7-0.2-1.3-0.5-1.6 -0.3-0.4-0.8-0.5-1.4-0.5 -0.3 0-0.5 0-0.8 0.1 -0.2 0.1-0.4 0.2-0.6 0.4s-0.3 0.4-0.4 0.7c-0.1 0.3-0.2 0.6-0.2 0.9v5c0.3 0 0.5 0.1 0.6 0.1 0.2 0 0.3 0 0.3 0.1 0.1 0 0.1 0 0.1 0 0.4 0.1 0.6 0.3 0.6 0.7V19h-1.7 -2.7v-7.2c0-0.8-0.2-1.3-0.5-1.6s-0.8-0.5-1.3-0.5c-0.4 0-0.8 0.1-1.1 0.3 -0.3 0.2-0.7 0.5-1 0.8v6.1c0.3 0 0.5 0.1 0.6 0.1s0.3 0 0.3 0.1c0.1 0 0.1 0 0.1 0 0.4 0.1 0.5 0.3 0.5 0.7V19h-1.7 -2.7 -1.7v-1.3c0-0.4 0.2-0.6 0.6-0.7 0 0 0.1 0 0.1 0 0.1 0 0.2 0 0.3-0.1 0.2 0 0.4-0.1 0.7-0.1V9.8c-0.3 0-0.5-0.1-0.7-0.1 -0.2 0-0.3 0-0.3-0.1 -0.1 0-0.1 0-0.1 0 -0.4-0.1-0.6-0.3-0.6-0.7V7.7h1.7l1.7 0c0.4 0 0.6 0.2 0.7 0.5L77.7 9c0.2-0.2 0.4-0.4 0.6-0.6s0.4-0.3 0.7-0.5c0.2-0.1 0.5-0.2 0.8-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.7 0 1.3 0.2 1.8 0.6s0.8 0.9 1 1.5c0.2-0.4 0.4-0.7 0.7-1C84.4 8.4 84.7 8.2 85 8c0.3-0.2 0.7-0.3 1-0.4 0.4-0.1 0.7-0.1 1.1-0.1 0.6 0 1.2 0.1 1.7 0.3C89.3 8 89.7 8.2 90 8.6c0.3 0.4 0.6 0.8 0.8 1.3 0.2 0.5 0.3 1.1 0.3 1.8v5c0.3 0 0.5 0.1 0.7 0.1 0.2 0 0.3 0 0.3 0.1s0.1 0 0.1 0C92.5 17 92.7 17.3 92.7 17.7z"/> <path fill="#D74022" d="M104.9 17.6v1.3h-1.4 -0.3 -0.9c-0.3 0-0.5 0-0.6-0.1 -0.1-0.1-0.3-0.2-0.3-0.5l-0.2-0.8c-0.3 0.3-0.6 0.5-0.8 0.7 -0.3 0.2-0.6 0.4-0.9 0.5 -0.3 0.1-0.6 0.2-0.9 0.3 -0.3 0.1-0.7 0.1-1.1 0.1 -0.5 0-0.9-0.1-1.3-0.2 -0.4-0.1-0.8-0.3-1-0.6 -0.3-0.3-0.5-0.6-0.7-1 -0.2-0.4-0.2-0.8-0.2-1.3 0-0.4 0.1-0.8 0.3-1.3 0.2-0.4 0.6-0.8 1.1-1.1s1.2-0.6 2.1-0.8 1.9-0.3 3.2-0.3v-0.7c0-0.8-0.2-1.3-0.5-1.7 -0.3-0.4-0.8-0.5-1.4-0.5 -0.4 0-0.8 0.1-1.1 0.2 -0.3 0.1-0.5 0.2-0.8 0.3 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.4 0.2-0.6 0.2 -0.2 0-0.3 0-0.5-0.1 -0.1-0.1-0.2-0.2-0.3-0.4l-0.5-0.9C96 8 97.5 7.4 99.4 7.4c0.7 0 1.2 0.1 1.8 0.3 0.5 0.2 1 0.5 1.3 0.9 0.4 0.4 0.6 0.8 0.8 1.4 0.2 0.5 0.3 1.1 0.3 1.8v5c0.2 0 0.4 0.1 0.6 0.1s0.2 0 0.2 0C104.7 17 104.9 17.3 104.9 17.6zM100.9 14.1c-0.8 0-1.5 0-2 0.2 -0.5 0.1-1 0.2-1.3 0.4S97.1 15 97 15.2s-0.2 0.4-0.2 0.7c0 0.5 0.1 0.8 0.4 1 0.3 0.2 0.7 0.3 1.1 0.3 0.3 0 0.5 0 0.8-0.1 0.2-0.1 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.2 0.6-0.4s0.4-0.3 0.6-0.5V14.1z"/> <path fill="#D74022" d="M108.1 18.3c-0.5-0.6-0.8-1.3-0.8-2.3V9.7h-1.1c-0.1 0-0.3 0-0.4-0.1s-0.2-0.2-0.2-0.4V8.1l1.8-0.3 0.6-3.1c0-0.1 0.1-0.3 0.2-0.3 0.1-0.1 0.2-0.1 0.4-0.1h1.4v3.6h3v1.9h-3v6.1c0 0.4 0.1 0.6 0.3 0.8 0.2 0.2 0.4 0.3 0.7 0.3 0.2 0 0.3 0 0.4-0.1s0.2-0.1 0.3-0.1c0.1 0 0.2-0.1 0.2-0.1 0.1 0 0.1-0.1 0.2-0.1 0.1 0 0.1 0 0.2 0.1 0.1 0 0.1 0.1 0.2 0.2l0.8 1.3c-0.4 0.3-0.9 0.6-1.4 0.7 -0.5 0.2-1 0.3-1.6 0.3C109.4 19.1 108.7 18.9 108.1 18.3z"/> <path fill="#D74022" d="M122.1 7.9c0.7 0.3 1.3 0.7 1.8 1.2 0.5 0.5 0.9 1.1 1.1 1.8s0.4 1.5 0.4 2.4c0 0.9-0.1 1.7-0.4 2.4s-0.6 1.3-1.1 1.8 -1.1 0.9-1.8 1.2 -1.5 0.4-2.3 0.4 -1.6-0.1-2.3-0.4 -1.3-0.7-1.8-1.2c-0.5-0.5-0.9-1.1-1.1-1.8s-0.4-1.5-0.4-2.4c0-0.9 0.1-1.7 0.4-2.4s0.6-1.3 1.1-1.8c0.5-0.5 1.1-0.9 1.8-1.2s1.5-0.4 2.3-0.4C120.7 7.5 121.4 7.6 122.1 7.9zM121.9 16.1c0.5-0.6 0.7-1.6 0.7-2.8 0-1.2-0.2-2.1-0.7-2.8s-1.1-1-2.1-1c-1 0-1.7 0.3-2.1 1 -0.5 0.6-0.7 1.6-0.7 2.8 0 1.2 0.2 2.1 0.7 2.8 0.5 0.6 1.2 1 2.1 1C120.8 17 121.5 16.7 121.9 16.1z"/> <path fill="#D74022" d="M134.3 7.8c0.6 0.2 1.1 0.6 1.5 1s0.8 1 1 1.6c0.2 0.6 0.4 1.4 0.4 2.2 0 0.2 0 0.4 0 0.5s-0.1 0.2-0.1 0.3 -0.1 0.1-0.2 0.2c-0.1 0-0.2 0-0.3 0h-7c0.1 1.2 0.4 2 0.9 2.6 0.5 0.5 1.3 0.8 2.2 0.8 0.4 0 0.8-0.1 1.1-0.2s0.6-0.2 0.8-0.3 0.4-0.2 0.6-0.3 0.4-0.2 0.5-0.2c0.1 0 0.2 0 0.3 0.1 0.1 0 0.2 0.1 0.2 0.2l0.8 1c-0.3 0.4-0.6 0.6-1 0.9s-0.8 0.4-1.2 0.6c-0.4 0.1-0.8 0.2-1.2 0.3 -0.4 0.1-0.8 0.1-1.2 0.1 -0.8 0-1.5-0.1-2.2-0.4 -0.7-0.3-1.3-0.6-1.8-1.2 -0.5-0.5-0.9-1.1-1.2-1.9s-0.4-1.6-0.4-2.6c0-0.8 0.1-1.5 0.4-2.2 0.2-0.7 0.6-1.3 1.1-1.8s1-0.9 1.7-1.2c0.7-0.3 1.4-0.4 2.3-0.4C133 7.5 133.7 7.6 134.3 7.8zM130.5 10.1c-0.4 0.4-0.7 1.1-0.9 1.9h5.1c0-0.4 0-0.7-0.1-1 -0.1-0.3-0.2-0.6-0.4-0.8s-0.4-0.4-0.7-0.6 -0.7-0.2-1.1-0.2C131.6 9.4 131 9.7 130.5 10.1z"/> <path fill="#D74022" d="M147 15.4c0 0.5-0.1 1-0.3 1.5 -0.2 0.5-0.5 0.9-0.9 1.2 -0.4 0.3-0.9 0.6-1.4 0.8 -0.6 0.2-1.2 0.3-1.9 0.3 -1.4 0-2.8-0.3-3.6-0.6v0 -1.1 -2.1h0.1 0.3 0.9c0.3 0 0.5 0.1 0.5 0.4 0 0.1 0.1 0.4 0.1 1.3 0.6 0.2 1.3 0.2 1.8 0.2 0.3 0 0.6 0 0.8-0.1 0.2-0.1 0.4-0.2 0.6-0.3 0.2-0.1 0.3-0.3 0.3-0.4 0.1-0.2 0.1-0.3 0.1-0.5 0-0.3-0.1-0.5-0.2-0.6 -0.2-0.2-0.4-0.3-0.6-0.4 -0.3-0.1-0.6-0.2-0.9-0.3 -0.3-0.1-0.7-0.2-1-0.3 -0.3-0.1-0.7-0.3-1-0.4 -0.3-0.2-0.6-0.4-0.9-0.6 -0.3-0.2-0.5-0.5-0.6-0.9 -0.2-0.4-0.2-0.8-0.2-1.3 0-0.5 0.1-0.9 0.3-1.3s0.5-0.8 0.8-1.1c0.4-0.3 0.8-0.6 1.3-0.7s1.1-0.3 1.8-0.3c1.1 0 1.7 0.1 3.3 0.6v0 3.2h-0.1 -0.3 -0.9c-0.3 0-0.5-0.1-0.5-0.4 0-0.1-0.1-0.4-0.1-1.2 -0.3-0.1-0.8-0.1-1.3-0.1 -0.5 0-1 0.1-1.3 0.3 -0.3 0.2-0.5 0.5-0.5 0.9 0 0.2 0.1 0.4 0.2 0.6 0.2 0.2 0.4 0.3 0.6 0.4 0.3 0.1 0.6 0.2 0.9 0.3 0.3 0.1 0.7 0.2 1 0.3 0.3 0.1 0.7 0.3 1 0.4s0.6 0.3 0.9 0.6c0.3 0.2 0.5 0.5 0.6 0.8C146.9 14.5 147 14.9 147 15.4z"/> </svg> </div> <ul class="buttons"> <li><a id="btnPlay" class="button" href="#">replay</a></li> <li><a id="btnSlowMo" class="button" href="#">slow motion</a></li> <li><a id="btnReverse" class="button" href="#">reverse</a></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animating SVG With GreenSock - Script Codes CSS Codes
#intro { height: 100vh; width: 70%; margin: 0 auto; overflow: hidden;
}
#logo { height: 152px; width: 309px; margin: 20px auto 40px auto; position: relative;
}
#intro #ihtLogo { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; transform: translate(-50%, -50%);
}
#intro #ihtText { width: 100%; position: absolute; bottom: 0%; width: 70%; left: 50%; transform: translate(-50%, 160%);
}
.buttons { position: absolute; bottom: 20px; left: 20px; list-style: none; margin: 0; padding:0; right: 20px;
}
.button { float: left; margin-right: 10px; padding: 10px 15px; border: 1px #ebebeb solid; text-decoration: none; color: #222222
}
Animating SVG With GreenSock - Script Codes JS Codes
/* Setup variables */ var tomato = $("#tomato"), bracketRight = $(".bracketRight"), bracketLeft = $(".bracketLeft"), tomatoLeft = $(".tomatoLeft"), tomatoRight = $(".tomatoRight"), tomatoLeaves = $(".tomatoLeaves"), letters = $("#ihtText path"), $btnPlay = $("#btnPlay"), $btnSlowMo = $("#btnSlowMo"), $btnReverse = $("#btnReverse"), tl; /* Create a timeline */ tl = new TimelineMax(); /* Whole tomato - move left side and leaves together */ tl.set([tomatoLeft], {xPercent: 23.6}); tl.set([tomatoLeaves], {xPercent: 41}); tl.set([tomato], {xPercent: 2, rotation: 13, transformOrigin:"center center"}); /* Clear the stage */ tl.set(tomato, {yPercent: -200}); tl.set(bracketRight, {xPercent: 200}); tl.set(bracketLeft, {xPercent: -200}); /* Animation sequence */ tl.to([bracketRight,bracketLeft], 0.3, {xPercent: 0, ease:Power4.easeOut}, 0.5) .to(tomato, 0.5, {yPercent: 0, ease:Bounce.easeOut}) .to(tomato, 0.2, {rotation: 0, xPercent: -4}) .to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0},"split") .to(tomato, 0.2, {rotation: 0, xPercent: 0},"split") .to(tomatoRight, 0.2, {xPercent: 2},"split") .staggerFrom(letters, 0.01, {autoAlpha: 0}, 0.03) .add("end"); $btnPlay.click( function(){ tl.timeScale(1).seek(0); } ); $btnSlowMo.click( function(){ tl.timeScale(0.2).seek(0.5); } ); $btnReverse.click( function(){ tl.timeScale(1).seek("end").reverse(); } );
![Animating SVG With GreenSock - Script Codes](http://shots.codepen.io/ihatetomatoes/pen/VYLMrJ-512.jpg)
Developer | Petr Tichy |
Username | ihatetomatoes |
Uploaded | September 07, 2022 |
Rating | 4.5 |
Size | 5,944 Kb |
Views | 28,336 |
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!
Name | Size |
GSAP - TweenLite demo - Final | 3,121 Kb |
GreenSock - TweenLite - Comp | 3,139 Kb |
CSS3 Glitch Animation | 3,441 Kb |
CSS3 Spritesheet Fireworks Animation | 2,879 Kb |
GreenSock - BezierPlugin Tutorial | 2,992 Kb |
Simple ScrollMagic Tutorial | 3,788 Kb |
GreenSock - Click | 2,582 Kb |
SVG Match on fire - GreenSock Animation | 3,812 Kb |
Awesome Custom Grids with Susy | 2,264 Kb |
GreenSock - TweenLite demo - Start | 2,541 Kb |
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!
Name | Username | Size |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
Review test | Otro_user_gil | 4,054 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!