GSAP stagger cheezburger

Developer
Amanda Cheung
Size
4,972 Kb
Views
14,168
  1. GSAP stagger cheezburger Previews
  2. GSAP stagger cheezburger HTML Codes
  3. GSAP stagger cheezburger CSS Codes
  4. GSAP stagger cheezburger JS Codes

How do I make an gsap stagger cheezburger?

What is a gsap stagger cheezburger? How do you make a gsap stagger cheezburger? This script and codes were developed by Amanda Cheung on 15 November 2022, Tuesday.

GSAP stagger cheezburger Previews
IQ Test

GSAP stagger cheezburger - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GSAP stagger cheezburger</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="button" id="button" value="Restart!">
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.471" height="806.75" viewBox="0 0 342.471 606.75" id="whole"> <g id="bottom-bun"> <path fill="#EFB86F" d="M171.235 396.741c-79.432 0-143.822 0-143.822-40.193v-26.082h287.645v26.082c0 41.812-64.391 40.193-143.823 40.193z"/> <path fill="#DEA968" d="M22.049 329.965c0 9.52-1.853 17.488 4.733 19.732.954 1.926 5.594 3.387 11.188 3.387 4.939 0 9.133-.141 10.704-1.732h.826c1.571 1.592 5.765 1.732 10.704 1.732 4.941 0 9.134-.141 10.705-1.732h.826c1.572 1.592 5.764 1.732 10.705 1.732s9.133-.141 10.705-1.732h.826c1.571 1.592 5.764 1.73 10.704 1.73s9.133-.139 10.704-1.73h.827c1.571 1.592 5.764 1.732 10.704 1.732 4.941 0 9.133-.141 10.705-1.732h.826c1.572 1.592 5.764 1.732 10.705 1.732 4.94 0 9.133-.141 10.705-1.732h.826c1.57 1.592 5.764 1.732 10.703 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.764 1.732 10.704 1.732s9.133-.141 10.704-1.732h.827c1.571 1.592 5.764 1.732 10.705 1.732 4.939 0 9.133-.141 10.703-1.732h.827c1.571 1.592 5.765 1.732 10.704 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.763 1.732 10.704 1.732 4.939 0 9.133-.141 10.704-1.732h.827c1.571 1.592 5.764 1.732 10.703 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.763 1.732 10.704 1.732 5.707 0 10.419-.521 11.236-2.504 6.412-2.402 4.017-11.264 4.017-20.615 0-.824-.049-1.631-.119-2.43h-297.757c-.07.799-.12 1.606-.12 2.43z"/> <path stroke="#443D3F" stroke-width="20" stroke-miterlimit="10" d="M171.235 396.741c-79.432 0-143.822 0-143.822-40.193v-26.082h287.645v26.082c0 41.812-64.391 40.193-143.823 40.193z" fill="none"/> </g> <g id="burger"> <path fill="#825D3A" d="M316.032 291.739c-.817-1.98-5.529-3.504-11.236-3.504-4.939 0-9.132.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.131.141-10.703 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732-4.941 0-9.133.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.132.141-10.703 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732-4.941 0-9.133.141-10.705 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732s-9.132.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.131.141-10.703 1.732h-.827c-1.571-1.592-5.765-1.732-10.704-1.732-4.941 0-9.133.141-10.704 1.732h-.828c-1.571-1.592-5.764-1.732-10.704-1.732-4.939 0-9.132.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.704-1.732s-9.132.141-10.704 1.732h-.827c-1.571-1.592-5.765-1.732-10.704-1.732-4.94 0-9.133.141-10.704 1.732h-.827c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.132.141-10.703 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732-5.594 0-10.233 1.463-11.188 3.385-6.016 2.053-10.594 8.885-11.344 17.305h311.594c-.74-8.26-5.157-14.995-11.004-17.186z"/> <path fill="#725033" d="M15.318 309.352c0 9.52 4.878 17.488 11.464 19.732.954 1.926 5.594 3.387 11.188 3.387 4.939 0 9.133-.141 10.704-1.732h.826c1.571 1.592 5.765 1.732 10.704 1.732 4.941 0 9.134-.141 10.705-1.732h.826c1.572 1.592 5.764 1.732 10.705 1.732s9.133-.141 10.705-1.732h.826c1.571 1.592 5.764 1.73 10.704 1.73s9.133-.139 10.704-1.73h.827c1.571 1.592 5.764 1.732 10.704 1.732 4.941 0 9.133-.141 10.705-1.732h.826c1.572 1.592 5.764 1.732 10.705 1.732 4.94 0 9.133-.141 10.705-1.732h.826c1.57 1.592 5.764 1.732 10.703 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.764 1.732 10.704 1.732s9.133-.141 10.704-1.732h.827c1.571 1.592 5.764 1.732 10.705 1.732 4.939 0 9.133-.141 10.703-1.732h.827c1.571 1.592 5.765 1.732 10.704 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.763 1.732 10.704 1.732 4.939 0 9.133-.141 10.704-1.732h.827c1.571 1.592 5.764 1.732 10.703 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.763 1.732 10.704 1.732 5.707 0 10.419-.521 11.236-2.504 6.412-2.402 11.119-11.264 11.119-20.615 0-.824-.049-1.631-.119-2.43h-311.59c-.07.799-.12 1.606-.12 2.43z"/> <path stroke="#443D3F" stroke-width="15" stroke-miterlimit="10" d="M327.151 309.352c0-9.352-4.707-17.213-11.119-19.615-.817-1.98-5.529-3.504-11.236-3.504-4.939 0-9.132.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.131.141-10.703 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732-4.941 0-9.133.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.132.141-10.703 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732-4.941 0-9.133.141-10.705 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732s-9.132.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.131.141-10.703 1.732h-.827c-1.571-1.592-5.765-1.732-10.704-1.732-4.941 0-9.133.141-10.704 1.732h-.828c-1.571-1.592-5.764-1.732-10.704-1.732-4.939 0-9.132.141-10.703 1.732h-.828c-1.572-1.592-5.764-1.732-10.704-1.732s-9.132.141-10.704 1.732h-.827c-1.571-1.592-5.765-1.732-10.704-1.732-4.94 0-9.133.141-10.704 1.732h-.827c-1.572-1.592-5.764-1.732-10.705-1.732-4.939 0-9.132.141-10.703 1.732h-.828c-1.571-1.592-5.764-1.732-10.703-1.732-5.594 0-10.233 1.463-11.188 3.385-6.586 2.246-11.464 10.217-11.464 19.734 0 9.52 4.878 17.488 11.464 19.732.954 1.926 5.594 3.387 11.188 3.387 4.939 0 9.133-.141 10.704-1.732h.822c1.571 1.592 5.765 1.732 10.704 1.732 4.941 0 9.134-.141 10.705-1.732h.826c1.572 1.592 5.764 1.732 10.705 1.732s9.133-.141 10.705-1.732h.826c1.571 1.592 5.764 1.73 10.704 1.73s9.133-.139 10.704-1.73h.827c1.571 1.592 5.764 1.732 10.704 1.732 4.941 0 9.133-.141 10.705-1.732h.826c1.572 1.592 5.764 1.732 10.705 1.732 4.94 0 9.133-.141 10.705-1.732h.826c1.57 1.592 5.764 1.732 10.703 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.764 1.732 10.704 1.732s9.133-.141 10.704-1.732h.827c1.571 1.592 5.764 1.732 10.705 1.732 4.939 0 9.133-.141 10.703-1.732h.827c1.571 1.592 5.765 1.732 10.704 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.763 1.732 10.704 1.732 4.939 0 9.133-.141 10.704-1.732h.827c1.571 1.592 5.764 1.732 10.703 1.732 4.941 0 9.134-.141 10.705-1.732h.827c1.571 1.592 5.763 1.732 10.704 1.732 5.707 0 10.419-.521 11.236-2.504 6.416-2.402 11.123-11.263 11.123-20.615z" fill="none"/> </g> <g id="cheese"> <path fill="#E5E13C" d="M330.414 290.237h-318.357c-5.522 0-4.478-8.586-4.478-19.18l163.656-19.184s163.656 8.59 163.656 19.184 1.046 19.18-4.477 19.18z"/> <path stroke="#443D3F" stroke-width="15" stroke-miterlimit="10" d="M330.414 290.237h-318.357c-5.522 0-4.478-8.586-4.478-19.18l163.656-19.184s163.656 8.59 163.656 19.184 1.046 19.18-4.477 19.18z" fill="none"/> </g> <g id="tomato"> <path fill="#BB4130" d="M302.068 262.329h-261.667c-5.246 0-9.5-8.691-9.5-19.412s4.254-19.41 9.5-19.41h261.667c5.247 0 9.5 8.689 9.5 19.41s-4.253 19.412-9.5 19.412z"/> <path fill="#DD4A39" d="M302.069 223.506h-261.667c-4.999 0-9.087 7.893-9.463 17.91h280.593c-.377-10.017-4.465-17.91-9.463-17.91z"/> <path stroke="#443D3F" stroke-width="15" stroke-miterlimit="10" d="M302.068 263.329h-261.667c-5.246 0-9.5-8.691-9.5-19.41 0-10.723 4.254-19.412 9.5-19.412h261.667c5.247 0 9.5 8.689 9.5 19.412 0 10.718-4.253 19.41-9.5 19.41z" fill="none"/> </g> <g id="lettuce"> <path fill="#55B948" d="M285.926 165.378c-12.026 0-41.309 1.447-51.019 3.966-8.535-2.215-28.67-3.966-28.67-3.966h-4.332c-11.148 0-21.626 1.255-30.834 3.443-9.209-2.188-19.687-3.443-30.836-3.443h-4.332s-20.135 1.751-28.668 3.966c-9.711-2.519-38.993-3.966-51.02-3.966-36.451 0-47.984 13.236-47.984 29.564 0 16.33 11.533 29.566 47.984 29.566 12.026 0 41.309-1.447 51.02-3.965 8.533 2.211 30.112 3.943 30.834 3.934.723.01 1.438.031 2.166.031 11.149 0 21.627-1.258 30.836-3.443 9.208 2.186 19.686 3.443 30.834 3.443.729 0 1.444-.021 2.166-.031.723.01 22.301-1.723 30.836-3.934 9.71 2.518 38.992 3.965 51.019 3.965 36.452 0 47.984-13.236 47.984-29.566 0-16.328-11.532-29.564-47.984-29.564z"/> <g> <defs> <path id="a" d="M285.926 165.378c-12.026 0-41.309 1.447-51.019 3.966-8.535-2.215-28.67-3.966-28.67-3.966h-4.332c-11.148 0-21.626 1.255-30.834 3.443-9.209-2.188-19.687-3.443-30.836-3.443h-4.332s-20.135 1.751-28.668 3.966c-9.711-2.519-38.993-3.966-51.02-3.966-36.451 0-47.984 13.236-47.984 29.564 0 16.33 11.533 29.566 47.984 29.566 12.026 0 41.309-1.447 51.02-3.965 8.533 2.211 30.112 3.943 30.834 3.934.723.01 1.438.031 2.166.031 11.149 0 21.627-1.258 30.836-3.443 9.208 2.186 19.686 3.443 30.834 3.443.729 0 1.444-.021 2.166-.031.723.01 22.301-1.723 30.836-3.934 9.71 2.518 38.992 3.965 51.019 3.965 36.452 0 47.984-13.236 47.984-29.566 0-16.328-11.532-29.564-47.984-29.564z"/> </defs> <clipPath id="b"> <use xlink:href="#a" overflow="visible"/> </clipPath> <path clip-path="url(#b)" fill="#81C56B" d="M358.034 102.378c-19.352 0-66.465 2.182-82.088 5.978-13.732-3.338-46.127-5.978-46.127-5.978h-6.971c-17.938 0-34.795 1.892-49.611 5.19-14.816-3.299-31.674-5.19-49.611-5.19h-6.971s-32.396 2.64-46.127 5.978c-15.623-3.796-62.736-5.978-82.088-5.978-58.647 0-77.203 19.952-77.203 44.564 0 24.614 18.556 44.566 77.203 44.566 19.352 0 66.465-2.183 82.088-5.978 13.73 3.334 48.45 5.943 49.611 5.929 1.162.015 2.314.049 3.486.049 17.938 0 34.795-1.896 49.611-5.19 14.816 3.295 31.674 5.19 49.611 5.19 1.172 0 2.324-.034 3.485-.049 1.162.015 35.88-2.595 49.612-5.929 15.623 3.795 62.736 5.978 82.088 5.978 58.647 0 77.203-19.952 77.203-44.566.002-24.612-18.553-44.564-77.201-44.564z"/> </g> <path stroke="#443D3F" stroke-width="15" stroke-miterlimit="10" d="M285.926 165.378c-12.026 0-41.309 1.447-51.019 3.966-8.535-2.215-28.67-3.966-28.67-3.966h-4.332c-11.148 0-21.626 1.255-30.834 3.443-9.209-2.188-19.687-3.443-30.836-3.443h-4.332s-20.135 1.751-28.668 3.966c-9.711-2.519-38.993-3.966-51.02-3.966-36.451 0-47.984 13.236-47.984 29.564 0 16.33 11.533 29.566 47.984 29.566 12.026 0 41.309-1.447 51.02-3.965 8.533 2.211 30.112 3.943 30.834 3.934.723.01 1.438.031 2.166.031 11.149 0 21.627-1.258 30.836-3.443 9.208 2.186 19.686 3.443 30.834 3.443.729 0 1.444-.021 2.166-.031.723.01 22.301-1.723 30.836-3.934 9.71 2.518 38.992 3.965 51.019 3.965 36.452 0 47.984-13.236 47.984-29.566 0-16.328-11.532-29.564-47.984-29.564z" fill="none"/> </g> <g id="top-bun"> <path fill="#EFB86F" d="M171.235 10c-79.431 0-143.822 52.045-143.822 132.3v26.083h287.645v-26.083c0-80.255-64.391-132.3-143.823-132.3z"/> <g fill="#FCCB86"> <path d="M147.98 18.342c2.516 3.471 1.947 6.645-.373 8.326-2.319 1.681-5.514 1.232-8.028-2.238s-1.981-9.679-1.081-10.332c1.129-.818 6.967.773 9.482 4.244zM190.149 25.879c-4.22-.752-6.014-3.431-5.512-6.251s3.112-4.715 7.332-3.963 8.146 5.591 7.951 6.686c-.243 1.372-5.55 4.28-9.771 3.528zM111.958 63.519c-2.529 3.462-5.724 3.896-8.037 2.208-2.312-1.69-2.869-4.867-.34-8.328 2.528-3.461 8.6-4.862 9.498-4.207 1.125.822 1.407 6.867-1.121 10.327zM159.047 45.019c-3.596-2.336-4.205-5.501-2.646-7.904 1.561-2.402 4.702-3.132 8.297-.797 3.594 2.335 5.327 8.319 4.723 9.252-.761 1.168-6.781 1.783-10.374-.551zM236.565 63.699c-1.679 3.944-4.691 5.092-7.327 3.971-2.636-1.122-3.897-4.09-2.219-8.034 1.679-3.943 7.274-6.685 8.298-6.249 1.283.544 2.927 6.367 1.248 10.312zM141.49 76.105c-2.68-3.347-2.265-6.543-.029-8.335 2.236-1.791 5.447-1.497 8.127 1.85 2.68 3.345 2.445 9.571 1.576 10.267-1.086.871-6.994-.437-9.674-3.782zM100.568 87.74c3.55 2.403 4.099 5.58 2.493 7.952-1.606 2.372-4.761 3.042-8.31.639s-5.167-8.421-4.544-9.342c.781-1.155 6.813-1.653 10.361.751zM68.49 56.665c-2.68-3.347-2.265-6.543-.029-8.335 2.236-1.791 5.447-1.497 8.127 1.85 2.68 3.345 2.445 9.571 1.576 10.267-1.086.871-6.994-.437-9.674-3.782zM191.621 67.679c3.529 2.433 4.052 5.615 2.425 7.974-1.626 2.357-4.787 3-8.315.566-3.527-2.433-5.096-8.464-4.464-9.38.792-1.147 6.825-1.593 10.354.84zM281.483 62.492c3.55 2.403 4.099 5.58 2.493 7.952-1.606 2.372-4.761 3.042-8.31.639s-5.167-8.421-4.544-9.342c.781-1.155 6.813-1.653 10.361.751zM246.091 37.854c-3.392-2.621-3.742-5.825-1.992-8.093 1.751-2.267 4.941-2.738 8.334-.118 3.392 2.62 4.632 8.726 3.953 9.606-.852 1.104-6.903 1.225-10.295-1.395zM266.787 90.212c1.573 3.988.231 6.92-2.432 7.972-2.665 1.05-5.647-.178-7.22-4.166-1.572-3.987.49-9.867 1.524-10.275 1.297-.512 6.557 2.482 8.128 6.469zM52.521 96.268c-3.529 2.435-6.688 1.792-8.314-.564-1.627-2.358-1.105-5.541 2.422-7.975 3.528-2.434 9.723-1.756 10.354-.841.791 1.146-.935 6.946-4.462 9.38zM169.569 99.522c3.55 2.403 4.099 5.58 2.493 7.952-1.606 2.372-4.761 3.042-8.31.639s-5.167-8.421-4.544-9.342c.781-1.154 6.813-1.652 10.361.751zM106.4 36.126c-3.596-2.336-4.205-5.501-2.646-7.904 1.561-2.402 4.702-3.132 8.297-.797 3.594 2.335 5.327 8.319 4.723 9.252-.76 1.169-6.781 1.783-10.374-.551zM215.782 102.305c-3.722-2.126-4.513-5.252-3.091-7.74 1.421-2.486 4.517-3.394 8.238-1.268 3.721 2.126 5.793 8.002 5.241 8.969-.691 1.21-6.665 2.165-10.388.039zM209.8 36.864c2.934 3.126 2.77 6.346.681 8.306-2.089 1.96-5.313 1.919-8.247-1.208-2.932-3.125-3.186-9.352-2.374-10.113 1.015-.953 7.007-.111 9.94 3.015zM240.973 42.844c-4.22-.752-6.014-3.431-5.512-6.251s3.112-4.715 7.332-3.963 8.146 5.591 7.951 6.686c-.244 1.372-5.551 4.28-9.771 3.528z"/> </g> <path stroke="#443D3F" stroke-width="20" stroke-miterlimit="10" d="M171.235 10c-79.431 0-143.822 52.045-143.822 132.3v26.083h287.645v-26.083c0-80.255-64.391-132.3-143.823-132.3z" fill="none"/> </g>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GSAP stagger cheezburger - Script Codes CSS Codes

.wrap { margin-right: auto; margin-left: auto; position: relative; background-color: #f1f1f1; height: 500px; width: 500px; overflow: hidden;
}
#whole { height: 100%; width: 100%;
}
#top-bun,
#lettuce,
#tomato,
#cheese,
#burger,
#bottom-bun { transform: translateY(-380px);
}

GSAP stagger cheezburger - Script Codes JS Codes

var button = $("#button"), whole = $("#whole"), bottomBun = $("#bottom-bun"), burger = $("#burger"), cheese = $("#cheese"), tomato = $("#tomato"), lettuce = $("#lettuce"), topBun = $("#top-bun"), tl = new TimelineLite(); tl.staggerTo([bottomBun, burger, cheese, tomato, lettuce, topBun], 0.5, {transform: 'translateY(150px)'}, 0.25);
button.click(function() { tl.restart();
});
GSAP stagger cheezburger - Script Codes
GSAP stagger cheezburger - Script Codes
Home Page Home
Developer Amanda Cheung
Username acacheung
Uploaded November 15, 2022
Rating 3
Size 4,972 Kb
Views 14,168
Do you need developer help for GSAP stagger cheezburger?

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 chomping cheezburger
GSAP rising block with reflection
GSAP rising block
Hello responsive logo
Multi-step GSAP animation
Link transition and keyframe animation demo
Click nav to back arrow
SVG Sprite Animation
Dobot wireframe
A Pen by Amanda Cheung
Create amazing marketing copy 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!