Flaş Haber! Twitter'ın X'e radikal dönüşümünü gösteren animasyonumuza göz atın.
SVG ve GSAP kitaplığının gücüyle ikonik kuş logosundan ilgi çekici X
logosuna sorunsuz bir şekilde geçiş yaptık! 2022'de Twitter'ı satın
alan Elon Musk, yapay zeka destekli bu kapsamlı sosyal platformun
lansmanını hızlandırdı. X, fikirler, ürünler ve hizmetler için evrensel
bir pazar yeri olmayı hedefliyor. Twitter web sitesinin yerini x.com
alırken X'in ortaya çıkışını izleyin! X'te yapay zeka destekli sınırsız
etkileşimle heyecan verici zamanlar sizi bekliyor! Takipte kalın ve
"Twitter to X" logo animasyonu gibi benzer animasyon içeriklerini
yakalayın.
Projede GSAP kütüphanesi ile entegre çalışan MorphSVG kütüphanesi kullanılmıştır. Bu kütüphane verilen iki SVG nesnesinin bir birine metamorfoz geçirmesini sağlıyor. Burada dikkat edilmesi gereken, sonuçta ortaya çıkacak olan şeklin hidden olması. Çünkü kaynak şekil değişim geçirmek suretiyle hedef şekle dönüşüyor ve eğer hedef şekil görünür olursa iki şekil üst üste hoş bir görüntü olmayacaktır.
<!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>
