Rotating Dynamic Text with Layout Adjustment

A smooth rotating text ticker that pushes each new word up from below while auto-resizing the span’s width and height to fit every word.

View Animation Live

Setup Guide

Get the

Rotating Dynamic Text with Layout Adjustment

live on your website in just a few clicks

Copy code

Add custom Javascript to before </body>

Javascript

<script>
document.addEventListener("DOMContentLoaded", () => {
  // ---------------------------
  // EDIT THESE
  // ---------------------------
  const SELECTOR = "[rotating-text]";
  const WORDS = ["MOVEMENT", "DYNAMICS", "MOMENTUM", "KINETICS"];
  const HOLD_MS = 1400;      // time each word stays
  const ANIM_MS = 520;       // slide + resize duration
  const EASE = "cubic-bezier(.19,1,.22,1)";

  const el = document.querySelector(SELECTOR);
  if (!el) return;

  // Basic styles needed for the effect
  el.style.display = "inline-block";
  el.style.position = "relative";
  el.style.overflow = "hidden";
  el.style.whiteSpace = "nowrap";
  el.style.verticalAlign = "bottom";
  el.style.willChange = "width,height";

  // Two layers: current + next
  el.innerHTML = `<span class="rt-a"></span><span class="rt-b"></span>`;
  const a = el.querySelector(".rt-a");
  const b = el.querySelector(".rt-b");

  // Layer styles
  [a, b].forEach(s => {
    s.style.position = "absolute";
    s.style.left = "0";
    s.style.top = "0";
    s.style.whiteSpace = "nowrap";
    s.style.willChange = "transform";
  });

  // Measurer (hidden) to get exact width/height for each word
  const m = document.createElement("span");
  m.style.position = "absolute";
  m.style.visibility = "hidden";
  m.style.whiteSpace = "nowrap";
  document.body.appendChild(m);

  const measure = (text) => {
    const cs = getComputedStyle(el);
    m.style.font = cs.font;
    m.style.letterSpacing = cs.letterSpacing;
    m.style.textTransform = cs.textTransform;
    m.style.lineHeight = cs.lineHeight;
    m.textContent = text;
    const r = m.getBoundingClientRect();
    return { w: Math.ceil(r.width), h: Math.ceil(r.height) };
  };

  let i = 0;
  a.textContent = WORDS[i];
  b.textContent = "";

  // Set initial size
  const init = measure(WORDS[i]);
  el.style.width = init.w + "px";
  el.style.height = init.h + "px";
  a.style.transform = "translateY(0)";
  b.style.transform = "translateY(0)";
  void el.offsetWidth;

  const goTo = (nextIndex) => {
    const nextWord = WORDS[nextIndex];
    const { w, h } = measure(nextWord);

    // Prepare next word below
    b.textContent = nextWord;
    a.style.transition = "none";
    b.style.transition = "none";
    a.style.transform = "translateY(0)";
    b.style.transform = `translateY(${h}px)`;

    // Animate container size
    el.style.transition = `width ${ANIM_MS}ms ${EASE}, height ${ANIM_MS}ms ${EASE}`;
    el.style.width = w + "px";
    el.style.height = h + "px";

    void el.offsetWidth;

    // Animate push
    a.style.transition = `transform ${ANIM_MS}ms ${EASE}`;
    b.style.transition = `transform ${ANIM_MS}ms ${EASE}`;
    requestAnimationFrame(() => {
      a.style.transform = `translateY(-${h}px)`;
      b.style.transform = "translateY(0)";
    });

    // After animation, commit: move next into a and clear b
    const done = () => {
      a.textContent = nextWord;
      a.style.transition = "none";
      b.style.transition = "none";
      a.style.transform = "translateY(0)";
      b.textContent = "";
      b.style.transform = `translateY(${h}px)`;
      void el.offsetWidth;
    };

    b.addEventListener("transitionend", done, { once: true });
  };

  setInterval(() => {
    i = (i + 1) % WORDS.length;
    goTo(i);
  }, HOLD_MS + ANIM_MS);

  // Keep correct on resize / font load
  const refresh = () => {
    const box = measure(WORDS[i]);
    el.style.transition = "none";
    el.style.width = box.w + "px";
    el.style.height = box.h + "px";
    a.style.transition = "none";
    b.style.transition = "none";
    a.style.transform = "translateY(0)";
    b.textContent = "";
    void el.offsetWidth;
  };
  window.addEventListener("resize", refresh);
  if (document.fonts?.ready) document.fonts.ready.then(refresh);
});
</script>

Add custom CSS to inside </head> tag

CSS

<style>  

[rotating-text] {
	display:inline-block;    
    position:relative;    
    overflow:hidden;    
    white-space:nowrap;    
    vertical-align:bottom;    
    will-change: width, height;  
}  

[rotating-text] .rt-word {
	position:absolute;    
    left:0;    
    top:0;    
    white-space:nowrap;    
    will-change: transform;    
    transform: translateY(0);  
}

</style>

All Done! Your Interaction is now ready to go live

View Animation Live

Mastering the Rotating Text Component

This guide covers how to fine-tune the motion, style the typography within Webflow, and ensure the layout remains stable across different devices.

Script Customization Options

The top of the Javascript contains a section labeled EDIT THESE. Use the table below to understand how changing these values affects the component behavior.

Variable	Function	Default	Adjustment Tip
WORDS	The list of text strings that will rotate.	["MOVEMENT", ...]	Wrap each word in "quotes" and separate with a comma.
HOLD_MS	How long a word stays visible before moving.	1400	Increase this (e.g., 3000) if your words are long or hard to read.
ANIM_MS	The duration of the push and resize animation.	520	Lower numbers (300) are snappier; higher (1000) are more cinematic.
EASE	The "feel" or physics of the transition.	cubic-bezier(...)	Use ease-in-out for a standard feel or leave the default.

Webflow Styling Requirements

Because this script measures your actual typography, you should handle all visual styling directly in the Webflow Style Panel.

Style Property	Setting	Why it matters
Width & Height	Auto	The script calculates exact pixel dimensions. Setting a fixed width will break the "push" effect.
Line Height	1.2 or higher	Avoid "0" or "1" line heights. If the height is too tight, the text may appear cut off during the slide.
Display	Inline-Block	This allows the rotator to sit perfectly inside a sentence without breaking to a new line.
Typography	Inherited	The component automatically adopts the Font, Color, and Weight of the parent element.

Critical Usage Rules

To ensure the component functions correctly across all browsers and screen sizes, please observe the following technical constraints:

Avoid Padding on the Rotator: Do not apply internal padding to the element with the [rotating-text] attribute. If you need space around the text, apply margin to the rotator or padding to its parent container.
Font Loading: The script is designed to wait for custom Google or Adobe fonts to fully load before calculating sizes. This prevents the "jumping" effect often seen when fonts swap from system defaults.
Nesting: For best results, place the [rotating-text] element inside a Text Block or Heading element. This ensures the surrounding static text aligns perfectly with the rotating words.
Mobile Responsiveness: If you change the font size on Tablet or Mobile, the script will automatically re-calculate the widths upon window resize, keeping your layout intact.

Pro Tip: For the most professional look, ensure all words in your WORDS array are roughly the same case (e.g., all UPPERCASE or all Title Case) to maintain visual consistency during the transition.

Copy Figma (Optional)

Copy the Component Code

Component Code (Next JS 15.2.9)

Copy the Styles

CSS Code

Using the Motion Component

Component Code

All Done! Your Interaction is now ready to go live

View Animation Live

<meta charset='utf-8'><meta charset="utf-8"><span data-metadata=""></span><span data-buffer=""></span><span style="font-size: 18px; white-space: pre-wrap;">ROTATING TEXT - LAYOUT</span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">Rotating text layouts </span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">Kinetics</span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">Bring</span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">movement</span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">to </span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">your designs</span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">Dynamics</span><br><span style="font-weight: bold; font-size: 24px; white-space: pre-wrap;">Designing intelligent digital experiences that drive engagement and impact. Purpose-driven digital experiences designed to empower organizations and users.</span><br><span style="font-weight: bold; font-size: 90px; white-space: pre-wrap;">Momentum</span><br><span style="font-size: 18px; white-space: pre-wrap;">Capturing attention, add visual rhythm, and allow brands to communicate multiple messages without cluttering the layout.</span><br><span style="font-size: 20px; white-space: pre-wrap;">Copy this component into your project!</span><br><span style="font-size: 18px; white-space: pre-wrap;">Category</span><br><span style="font-size: 18px; white-space: pre-wrap;">Navigation</span><br><span style="font-size: 18px; white-space: pre-wrap;">Need help?</span><br><span style="font-weight: bold; font-size: 18px; white-space: pre-wrap;">Join Slack</span>

const wfO={"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"98b6c182-ae7f-4f9a-0e28-7f272f0a67d8","type":"Block","tag":"div","classes":["885851db-5405-0092-27f5-fcf3043edc00"],"children":["a6ee7f5c-354b-9497-986f-eb9e4b2ed251"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a6ee7f5c-354b-9497-986f-eb9e4b2ed251","type":"Block","tag":"div","classes":["17622dbd-fabc-4358-e0dc-2ba195b3cc2c"],"children":["6445ac3f-abbf-34c3-ea5d-aaf90132754f"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6445ac3f-abbf-34c3-ea5d-aaf90132754f","type":"Block","tag":"div","classes":["1b6e7945-e79b-1b6e-9ff5-2ca7bd0f7701"],"children":["099b8e25-0c00-ce59-e226-04f24a9149df","8863c187-3724-2100-3417-0d033b168fc4","c5935ad9-a231-8d71-3d11-0c9b26667559"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"099b8e25-0c00-ce59-e226-04f24a9149df","type":"Block","tag":"div","classes":["c1e7febb-5cfa-e610-ca61-b171c27cdb6f"],"children":["beee0f3d-0577-e0a0-a162-24439837950b","1b5bfd9b-8bf7-fe15-0e87-98d234ede812"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"beee0f3d-0577-e0a0-a162-24439837950b","type":"Block","tag":"div","classes":["c90f10ca-6c69-059a-b340-6fdc419caca1"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1b5bfd9b-8bf7-fe15-0e87-98d234ede812","type":"Block","tag":"div","classes":[],"children":["cea3179d-bfb2-0e4f-70ef-4a19712eab36"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cea3179d-bfb2-0e4f-70ef-4a19712eab36","text":true,"v":"ROTATING TEXT - LAYOUT"},{"_id":"8863c187-3724-2100-3417-0d033b168fc4","type":"Heading","tag":"h1","classes":["5a532cf7-b5a3-72c3-61de-017d94830274","56bffe02-a08f-e089-4346-7c94a4249ea4"],"children":["6f4afc2b-d614-a482-8a99-135829708a47","3d8e7bc2-74e8-da15-9ec3-0803497b2021","4618d9da-4438-df66-44bb-29ef34a80a2e","04097b35-8d26-11bc-86e9-fc4e6f36a6f2","f52407f9-421a-61fa-6b32-4b24c737f36e","cfa47dc6-c0f9-fb42-99eb-a362a349bb64","c9d5b54a-0da1-6192-9614-3c2627cd7435"],"data":{"tag":"h1","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6f4afc2b-d614-a482-8a99-135829708a47","text":true,"v":"Rotating text layouts"},{"_id":"3d8e7bc2-74e8-da15-9ec3-0803497b2021","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"4618d9da-4438-df66-44bb-29ef34a80a2e","text":true,"v":"Bring "},{"_id":"04097b35-8d26-11bc-86e9-fc4e6f36a6f2","type":"Span","tag":"span","classes":["a0c24fa0-b2bb-a5ba-2db3-c1f960092767"],"children":["4f73476f-78f6-35eb-11d0-12f28edfbb30"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"rotating-text","value":""}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4f73476f-78f6-35eb-11d0-12f28edfbb30","text":true,"v":"MOVEMENT"},{"_id":"f52407f9-421a-61fa-6b32-4b24c737f36e","text":true,"v":" TO"},{"_id":"cfa47dc6-c0f9-fb42-99eb-a362a349bb64","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"c9d5b54a-0da1-6192-9614-3c2627cd7435","text":true,"v":"your designs"},{"_id":"c5935ad9-a231-8d71-3d11-0c9b26667559","type":"Block","tag":"div","classes":["f8bc169a-38e3-de09-3f41-ef54350f0f8a"],"children":["721c5fdf-8a1e-4953-6092-787a2bb7a4af"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"721c5fdf-8a1e-4953-6092-787a2bb7a4af","type":"Paragraph","tag":"p","classes":["07815991-952a-8d98-0e00-e4c25af2715c"],"children":["ce644017-01bc-638b-d5ef-19df62af1ea0"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ce644017-01bc-638b-d5ef-19df62af1ea0","text":true,"v":"Capturing attention, add visual rhythm, and allow brands to communicate multiple messages without cluttering the layout."}],"styles":[{"_id":"17622dbd-fabc-4358-e0dc-2ba195b3cc2c","fake":false,"type":"class","name":"section-rotating-top","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; overflow: hidden; width: 100%; max-width: 75rem; border-top-left-radius: 1.88rem; border-top-right-radius: 1.88rem; border-bottom-left-radius: 1.88rem; border-bottom-right-radius: 1.88rem; background-color: #f6f6f6;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"1b6e7945-e79b-1b6e-9ff5-2ca7bd0f7701","fake":false,"type":"class","name":"rotating-container","namespace":"","comb":"","styleLess":"display: flex; width: 100%; height: 100%; padding-top: 6.25rem; padding-bottom: 6.25rem; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: center; grid-column-gap: 3rem; grid-row-gap: 3rem; text-align: center; container-type: @raw<|inline-size|>;","variants":{"medium":{"styleLess":"padding-right: 1rem; padding-left: 1rem;"}},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"5a532cf7-b5a3-72c3-61de-017d94830274","fake":false,"type":"class","name":"text-90","namespace":"","comb":"","styleLess":"font-weight: 800; letter-spacing: -0.02em; font-size: @raw<|clamp(2.5rem, 10cqw, 5.63rem)|>;","variants":{},"children":["56bffe02-a08f-e089-4346-7c94a4249ea4"],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"c90f10ca-6c69-059a-b340-6fdc419caca1","fake":false,"type":"class","name":"subtitle-dot","namespace":"","comb":"","styleLess":"width: 0.5rem; height: 0.5rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; background-color: #6c4cf1;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"885851db-5405-0092-27f5-fcf3043edc00","fake":false,"type":"class","name":"main-wrap-component","namespace":"","comb":"","styleLess":"position: relative; z-index: 3; display: flex; min-height: 100vh; padding-top: 1.88rem; padding-right: 1.88rem; padding-bottom: 1.88rem; padding-left: 1.88rem; justify-content: center; align-items: center;","variants":{"medium":{"styleLess":"padding-top: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.5rem;"},"tiny":{"styleLess":"padding-top: 1.25rem; padding-right: 1rem; padding-bottom: 1.25rem; padding-left: 1rem;"}},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"c1e7febb-5cfa-e610-ca61-b171c27cdb6f","fake":false,"type":"class","name":"subtitle-wrapper","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; grid-column-gap: 0.75rem; grid-row-gap: 0.75rem;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"f8bc169a-38e3-de09-3f41-ef54350f0f8a","fake":false,"type":"class","name":"hero-par-rotate","namespace":"","comb":"","styleLess":"width: 100%; max-width: 36.63rem;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"a0c24fa0-b2bb-a5ba-2db3-c1f960092767","fake":false,"type":"class","name":"rotating-text","namespace":"","comb":"","styleLess":"overflow: hidden; color: #6c4cf1;","variants":{},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"56bffe02-a08f-e089-4346-7c94a4249ea4","fake":false,"type":"class","name":"rotating-text-word","namespace":"","comb":"&","styleLess":"text-transform: uppercase; font-size: @raw<|clamp(2.5rem, 8cqw, 5.63rem)|>;","variants":{"tiny":{"styleLess":"max-width: 14rem;"}},"children":[],"createdBy":"634453349d04687dd6f73a80","origin":null,"selector":null},{"_id":"07815991-952a-8d98-0e00-e4c25af2715c","fake":false,"type":"class","name":"text-size-medium","namespace":"","comb":"","styleLess":"font-size: 1.25rem;","variants":{},"children":[],"origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}};