Big news! Check out our morph animation, showcasing Twitter’s radical
transformation into X. With the power of SVG and GSAP library, we’ve
seamlessly transitioned from the iconic bird logo to the intriguing X
logo! Elon Musk, who bought Twitter in 2022, has accelerated the
launch of this comprehensive AI-powered social platform. X aims to be a
universal marketplace for ideas, products, and services. The future
looks like fighting bots and disinformation with a credibility score.
Watch as X unfolds, with x.com replacing the Twitter website! Exciting
times ahead with limitless AI-powered interaction on X! Stay tuned and
catch similar animation contents like Twitter to X logo animation.
The MorphSVG library, which is integrated with the GSAP library, was used in the project. This library allows two given SVG objects to metamorphose into each other. What should be noted here is that the resulting shape should be hidden. Because the source shape changes into the target shape and if the target shape is visible, the two shapes will not look nice on top of each other.
Animation timing is edited with delay expressions, while animation speeds can be presented more aesthetically thanks to the ease value.
All codes are below. Explanations will be here soon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>
</head>
<body>
<div
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(
circle,
rgba(34, 193, 195, 1) 0%,
rgba(253, 187, 45, 1) 100%
);
margin: 0;
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="240"
height="240"
viewBox="0 0 24 24"
>
<defs id="defs3283">
<linearGradient id="linearGradient7477">
<stop
style="stop-color: #22c1c3; stop-opacity: 1"
offset="0"
id="stop7473"
/>
<stop
style="stop-color: #fdbb2d; stop-opacity: 1"
offset="1"
id="stop7475"
/>
</linearGradient>
<radialGradient
xlink:href="#linearGradient7477"
id="radialGradient7479"
cx="16.975134"
cy="22.742589"
fx="16.975134"
fy="22.742589"
r="6.7100717"
gradientTransform="matrix(1,0,0,0.2043037,0,18.096194)"
gradientUnits="userSpaceOnUse"
/>
</defs>
<path
id="tweet1"
fill="#1d9bf0"
d="M24 4.557a9.83 9.83 0 0 1-2.828.775c1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555a4.93 4.93 0 0 0-4.797 6.045C7.728 8.088 4.1 6.128 1.671 3.149a4.93 4.93 0 0 0 1.523 6.574c-.806-.026-1.566-.247-2.229-.616a4.93 4.93 0 0 0 3.949 4.89c-.693.188-1.452.232-2.224.084a4.93 4.93 0 0 0 4.6 3.419A9.9 9.9 0 0 1 0 19.54a13.94 13.94 0 0 0 7.548 2.212c9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
/>
<path
id="tweet2"
style="display: none"
d="M 14.258,10.152 23.176,0 H 21.063 L 13.316,8.813 7.133,0 H 0 L 9.352,13.328 0,23.973 h 2.113 l 8.176,-9.309 6.531,9.309 h 7.133 z M 11.363,13.445 10.414,12.117 2.875,1.56 h 3.246 l 6.086,8.523 0.945,1.328 7.91,11.078 h -3.246 z m 0,0"
/>
<path
id="brand_name1"
fill="#1d9bf0"
style="
stroke-width: 0.05;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
"
d="M10.598 21.768v-.173q0 0 .001 0 .001 0 .001-.001-.004-.115.011-.213a.3.3 0 0 1 .072-.132c.113-.13.307-.151.441-.041.039.032.074.066.095.109a.49.49 0 0 1 .032.197q.002.209.002.417 0 .003.003.003l.883.008c.03.001.071.004.101.013a.31.31 0 0 1 .224.321c-.009.133-.118.272-.257.281q-.082.005-.163.006-.393.005-.787.008-.003 0-.003.003-.004.104.002.208c.004.07.015.127.053.179s.106.118.171.131q.077.016.182.017.248.002.496.004c.07 0 .135.002.196.033a.33.33 0 0 1 .099.517c-.038.046-.071.078-.127.09-.071.017-.149.017-.222.017q-.238.001-.477 0c-.153-.001-.269-.001-.401-.055a1.03 1.03 0 0 1-.577-.597c-.03-.079-.036-.171-.039-.257l-.008-.786q-.002-.154-.004-.309zm3.238.977l.004-.491c.001-.056 0-.116.021-.163.114-.259.448-.252.57-.002.021.044.022.106.024.156q.005.202.005.266l.013.39c.005.048.014.09.042.129.063.084.162.13.265.12.079-.008.137-.048.192-.105.047-.048.05-.144.052-.209l.012-.542q.002-.09.011-.159.002-.015.012-.038c.112-.253.451-.268.568-.009.023.05.033.118.034.174q.002.095-.003.217l-.004.273q-.001.131-.015.26c-.005.054-.017.103-.037.155-.109.285-.365.547-.674.592q-.154.022-.31.01c-.179-.014-.332-.11-.474-.213q-.002-.002-.005 0c-.138.1-.279.194-.452.21q-.131.013-.272.002c-.27-.021-.516-.219-.656-.445-.104-.167-.118-.34-.124-.537q-.008-.257-.001-.513.002-.091.019-.164c.015-.064.067-.118.117-.157.066-.052.16-.054.241-.046.056.006.115.05.155.092.081.084.083.179.085.291q.003.248.008.497c.001.053.001.124.012.168.013.054.052.102.094.136.134.11.325.066.421-.071.048-.068.05-.192.051-.273zm9.748-.801c.169.019.283.153.275.327q-.007.155-.133.244c-.064.045-.13.047-.204.049q-.184.006-.368.011c-.077.002-.142.001-.198.042-.068.049-.116.126-.121.211l-.01.605c-.001.044 0 .091-.015.133-.032.093-.114.188-.216.199q-.082.009-.146.002c-.085-.01-.182-.115-.212-.193-.015-.039-.015-.09-.016-.133l.004-.625c.001-.072.006-.139.025-.207.095-.333.413-.631.76-.658q.216-.017.447-.014l.128.006zm-7.525 1.804c-.075-.039-.167-.132-.178-.222q-.007-.059-.008-.194-.002-.48 0-.96 0-.137.009-.227.002-.027.02-.061c.108-.205.365-.251.529-.086.038.039.064.072.075.123.017.082.018.169.018.253q.002.474-.003.948-.001.085-.007.189a.32.32 0 0 1-.231.254c-.067.012-.164.016-.225-.016zm4.726 0a.98.98 0 0 1-.473-.304c-.186-.208-.251-.466-.224-.746.014-.147.061-.278.135-.403.262-.447.957-.486 1.371-.276a.88.88 0 0 1 .448.616c.029.152-.005.358-.197.37q-.103.006-.26.008-.413.003-.825.006a.003.003 11.056 0 0-.003.004c.002.032.001.061.022.086.112.13.269.124.432.124l.529.011c.17.011.281.195.226.357q-.03.087-.113.14c-.042.027-.077.032-.124.032q-.196.002-.392.001l-.442-.008a.491.491 0 0 1-.11-.017zm-.023-1.165l.63.002q.002 0 .002-.002-.017-.094-.091-.138a.47.47 0 0 0-.46.008c-.051.031-.064.074-.085.125a.004.004 0 0 0 .004.006zm-2.591-.546c.154.161.098.416-.1.506-.042.019-.096.02-.142.021q-.289.007-.493.009-.019 0-.032.002-.003 0-.003.003.002.101.006.201c.003.086.015.172.081.233.05.046.097.077.164.088q.054.009.109.01.12.002.241.004c.334.005.454.448.163.621-.049.029-.114.032-.17.035q-.173.01-.384-.003-.168-.01-.31-.08c-.254-.125-.457-.361-.528-.642-.024-.094-.027-.196-.029-.296l.002-1.147q.001-.109.007-.201c.004-.056.029-.101.066-.145a.33.33 0 0 1 .405-.078q.125.066.163.214.005.02.01.08.005.063.006.208 0 .125 0 .251 0 .003.003.003.243.003.486.008l.13.009c.057.01.11.045.149.086zm.92-.101l.518.007c.057.003.118.011.167.033.155.07.21.272.139.422-.075.159-.233.171-.392.173q-.211.003-.429.001-.006 0-.006.006c0 .084-.004.17.007.256.013.102.099.23.203.255q.059.014.131.018.13.007.26.01c.069.002.123.006.179.046q.09.064.134.168c.056.132.002.283-.101.375q-.03.027-.088.062-.002.001-.005.001h-.523c-.142-.005-.283-.064-.401-.143q-.216-.143-.34-.373a.86.86 0 0 1-.109-.42l-.003-.874-.005-.461c-.002-.236.189-.395.413-.35.098.02.233.15.239.255l.009.53q0 .003.003.003zm-2.91-.864h.034c.152.007.265.107.304.255q.024.091-.012.188c-.067.178-.27.271-.443.189-.239-.114-.26-.434-.041-.583q.071-.048.158-.049z"
stroke-width=".1"
/>
<path
id="brand_name2"
style="display: none"
d="M21.945 21.983q.151-.272.362-.402.211-.13.496-.13.384 0 .593.27.209.268.209.764v1.484h-.406v-1.471q0-.353-.125-.525-.125-.171-.382-.171-.314 0-.496.209-.182.209-.182.569v1.39h-.406v-1.471q0-.356-.125-.525-.125-.171-.386-.171-.31 0-.492.211-.182.209-.182.566v1.39h-.406v-2.459h.406v.382q.138-.226.332-.334.193-.108.459-.108.268 0 .454.136.189.136.279.395zm-3.712-.189q-.325 0-.514.255-.189.252-.189.694 0 .441.187.696.189.252.516.252.323 0 .512-.255.189-.255.189-.694 0-.437-.189-.692-.189-.257-.512-.257zm0-.342q.527 0 .828.342.301.342.301.948 0 .604-.301.948-.301.342-.828.342-.529 0-.83-.342-.299-.345-.299-.948 0-.606.299-.948.301-.342.83-.342zm-1.655.154v.378q-.171-.094-.345-.141-.171-.048-.347-.048-.393 0-.61.25-.217.248-.217.698 0 .45.217.7.217.248.61.248.176 0 .347-.046.173-.048.345-.143v.373q-.169.079-.351.119-.18.04-.384.04-.555 0-.883-.349-.327-.349-.327-.942 0-.602.329-.946.332-.345.907-.345.187 0 .364.04.178.037.345.114zm-3.142 1.807h.463v.558h-.463zm-.674-1.901l-.889 1.196.935 1.262h-.476l-.716-.966-.716.966h-.476l.955-1.286-.874-1.172h.476l.652.876.652-.876z"
stroke-width=".16"
/>
</svg>
</div>
<script>
function animation() {
gsap.to('#tweet1',
{duration: 2, morphSVG: '#tweet2', fill: '#242e36'});
gsap.to('#brand_name1',
{ delay: 0.2, scale: 0.01, ease: 'bounce.out', duration: 3.7,
transformOrigin: '100% 100%', fill: '#242e36'});
gsap.to('#brand_name1',
{ delay: 4, duration: 2, morphSVG: '#brand_name2'});
gsap.to('#brand_name1',
{ delay: 4.2, scale: 1.8, duration: 1,
transformOrigin: '100% 100%',
stroke: 'url(#radialGradient7479)', fill: '#242e36',})
}
setTimeout(animation, 1500)
</script>
</body>
</html>
