Search the Community

I have some very simple code with SplitText: document.fonts.ready.then(() => { const texts = document.querySelectorAll("[text-animation]"); if (!texts) return; let splitText; function runSplit() { splitText = new SplitText("[text-animation]", { types: "lines", linesClass: "line", }); } runSplit(); }); For some reason, SplitText seems to be creating multiple nested ".line" divs, I've also noticed the same behaviour when using words. The only CSS applied to the text is color and font size. Any idea on why this may be happening?

Hello, I’m using these animations on a Webflow site: // ANIMATION 1 : Mots ([animate-words]) document.querySelectorAll('[animate-words]').forEach((element) => { let split = new SplitText(element, { type: 'words' }); // Sépare en mots let delay = element.getAttribute('data-delay') || 0; gsap.from(split.words, { y: '110%', opacity: 0, rotationZ: '10', duration: 0.5, ease: 'power1.out', stagger: 0.1, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); // ANIMATION 2 : Caractères ([animate-chars]) document.querySelectorAll('[animate-chars]').forEach((element) => { let split = new SplitText(element, { type: 'chars' }); // Sépare en caractères let delay = element.getAttribute('data-delay') || 0; gsap.from(split.chars, { x: '-100%', opacity: 0, rotationZ: '-15', duration: 0.5, ease: 'power2.out', stagger: 0.05, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); // ANIMATION 3 : Lignes ([animate-lines]) document.querySelectorAll('[animate-lines]').forEach((element) => { let split = new SplitText(element, { type: 'lines' }); // Sépare en lignes let delay = element.getAttribute('data-delay') || 0; gsap.from(split.lines, { y: '100%', opacity: 0, duration: 0.5, ease: 'power2.out', stagger: 0.2, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); I then use the attributes on my text to animate them. On one specific page in development, I noticed that these animations sometimes fail to trigger. Here’s the page: https://agci-preprod.webflow.io/categories/branding-design Each heading has an animation. It’s not always consistent, but sometimes the text animation doesn’t start (I also noticed that when this happens, the ScrollTrigger markers are missing too). When this issue occurs, the text animation only starts once the text element reaches the top of the screen. Do you have any idea how I can fix this to ensure the text animations trigger reliably when they enter the viewport?

I am creating a website project and love this preloader idea, which I was able to get about 80% complete. I am having issues with the removal of chars being jarring, and I would love it if it could be smoother. I am a novice with JS and need some tips or solutions. I want the end result to say E & E. Thank you in advance!

Hi, everyone! We've been using SplitText for almost all of the heading animations on our website for a long time and accidentally revealed the following issue. It seems like Google is crawling our H1s instead of Title Tags on multiple pages and as a result— it is not able to read spans SplitText breaks headings into like a sentence. Some of the pages where H1s and other headings are crawled instead of Meta Title and Description display them as separate letters separated by spaces in SERP. Is there any fix possible for that? I don't think I can find similar topics on the forum. Website link I am also attaching multiple screenshots with the issue described. Thanks in advance!

Hello All, I'm just learning GSAP. How can I create this https://gsap.com/text/ animation. i've tried but couldn't get what is going on in there. I have refered to existing post of communties but still no idea.

Hello everyone. I have an array with text, using position fixed in the upper right corner of the screen and when scrolling to the desired section, I need to show new text, hiding the old one with animation. I did this, but the problem arises that when changing the browser window, everything breaks. Help me with this, please, and how can I optimize this solution? This is a code snippet, because further it is the same (p.s. I don't use useGsap because it breaks animation in production deployment of NExtJS) https://stackblitz.com/edit/stackblitz-starters-h6deec?file=app%2Fcomponent.tsx const TEXTS_FOR_DESKTOP = [ '2024', 'Finance', 'Reward', '2000', '2008', '2015', '2017', '2020', '2023', ] const titleRefs = useRef<(HTMLDivElement | null)[]>([]) const translateToY = -150 useEffect(() => { const mm = gsap.matchMedia(); const splittedText = titleRefs.current.map( (item) => new SplitText(item, { type: "chars" }) ) mm.add( { isTablet: '(min-width: 834px) and (max-width: 1509px)', isDesktop: '(min-width: 1510px)', isExtraSmallMobile: '(max-width: 833px)', }, ctx => { const {isDesktop, isTablet, isExtraSmallMobile} = ctx.conditions! if (isDesktop) { const groups: gsap.DOMTarget[] = gsap.utils.toArray('.trigger') splittedText.forEach((t, i) => { if (i > 0) { gsap.set((t as any).elements[0], { yPercent: 150, position: 'absolute', top: 0, left: 0, width: '100%', }) } }) // 2024-finance gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[0], start: 'top top', id: `anim_${0}`, end: '+=260px', // markers: true, scrub: 1, }, }) .to(splittedText[0].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to( splittedText[1].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }, '<-0.3' ) // finance-reward gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[1], start: 'center top', end: '+=500', id: `anim_${1}`, // markers: true, scrub: 1, }, }) .to(splittedText[1].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to(splittedText[2].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, scrollTrigger: { invalidateOnRefresh: true, trigger: groups[1], start: 'center top', end: '+=500', id: `anim_${1}`, // markers: true, scrub: 1, }, }) // reward-2000 gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[2], start: '-300 top', end: '+=200', id: `anim_${2}`, // markers: true, scrub: 1, }, }) .to(splittedText[2].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to(splittedText[3].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, scrollTrigger: { invalidateOnRefresh: true, trigger: groups[2], start: '-300 top', end: '+=200', id: `anim_${2}`, // markers: true, scrub: 1, }, }) } } ) }); <div className='fixed right-0 top-0 z-[-1] hidden h-[120px] w-full flex-col gap-[2px] overflow-hidden text-right uppercase 834:flex desktop:h-[200px]'> {TEXTS_FOR_DESKTOP.map((text, index) => ( <div key={index} className={`fluid-text flex items-center justify-end gap-1 font-[500] 834:leading-none`} ref={el => { titleRefs.current[index] = el }} > {text} </div> ))} </div>

Hey guys, I'm a Webflow designer developer who keeps running into issues implementing split type - every time I add it to my project, it ends up looking a mess for some reason. 🥲 I've attached an image (down below) of the kind of problems I have been getting. I'll also attach my code - I have tried so many variations now, honestly it's melting my brain! Here is the the timeline I want to add the text animation to - I want the text to pop up line by line when the star begins to spin (which you can see in the timeline below). It should be triggered at the same point. (pictured is #star-1) let tl3 = gsap.timeline({ scrollTrigger: { trigger: '#services', start: 'top 20%', // trigger when #about comes 30% into view end: 'bottom 85%', // set the end point to be 100% of the trigger's height scrub: true, // enable scrubbing markers: true, toggleActions: 'play none none reset', // play the animation when triggered onUpdate: (self) => { if (self.progress >= 0.12 && !self.spun) { gsap.to('#star-1', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun = true; } else if (self.progress < 0.12 && self.spun) { self.spun = false; // Reset the flag when progress goes below 12% } // Spin #star-2 at 50% progress if (self.progress >= 0.27 && !self.spun2) { gsap.to('#star-2', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun2 = true; // } else if (self.progress < 0.27 && self.spun2) { self.spun2 = false; // Reset the flag when progress goes below 50% } // Spin #star-3 at 70% progress if (self.progress >= 0.53 && !self.spun3) { gsap.to('#star-3', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun3 = true; // } else if (self.progress < 0.53 && self.spun3) { self.spun3 = false; // Reset the flag when progress goes below 70% } } } }); tl3.to('.animation-object3', { motionPath: { path: '#path3', align: '#path3', alignOrigin: [0.5, 0.8], autoRotate: true, ease: 'easeInCirc', delay: 0, }, }); // Add an event listener to the window resize event window.addEventListener('resize', function() { // Invalidate the motion path data for each timeline tl1.invalidate(); tl2.invalidate(); tl3.invalidate(); ScrollTrigger.refresh(); }); Here is an example of the kind of staggered text animation I want to add: let typeSplit = new SplitType('[animate]', { types: 'lines, words, chars', tagName: 'span' }) gsap.from('[animate] .line', { y: '100%', opacity: 0, duration: 0.5, ease: 'power1.out', stagger: 0.1, }) Thank you for any help or guidance! 😊

I don't have a repro since it's a framework specific issue, but does anyone have any up to date info about integrating club GSAP plugins with Nextjs? I just upgraded to Club GSAP (yay!!), but I'm encountering a seemingly common "Module not found" issue. I'm using Next v14.2.4 I have consulted almost every thread about Next and "module not found". I have tried UMD and ESM imports, clearing my next cache, forcing the removed node_modules and resetting my packages to try a clean install using the "npm install gsap@npm:@gsap/simply". I even tried in a brand new next repo where I never installed gsap-trial. I have dropped my token directly into my npmrc, and also tried abstracting it into a .env. I've attempted with and without the "require" syntax, and nothing seems to solve this pesky "Module not found" error when I try to import SplitText (or any club plugins). When I moved to the brand new Nextjs project, I followed the install helper for npm step by step. I'm considering just using a tarball, but this is a personal project that I'd like to consistently update, so the private npm would be more appropriate. I know the screenshot isn't that helpful, but that's pretty much all I've got right now. Basically just hoping someone has encountered and solved the same issue. As a note, this is NOT a Vercel issue. Haven't even gotten that far yet, this is purely a local dev problem. Still stoked on GSAP and glad to have joined to gain access to these new club plugins

Hi Dear, I have created a component with split text and scroll trigger in a Next.js project. It works fine on Android but is not functioning properly on iPhone. Specifically, I'm experiencing jerking while scrolling. Can anyone suggest a solution to fix this issue?

help me pls figure out how to break words into letters and make an animation of word replacements endlessly in a loop

Hello ! I'm new here and I have a problem to start animation on hover. I try to make the same animation like this : https://custom-hover-animations.webflow.io/ (Character Tween V1) Can you help me ? pls This is my animation without the hover trigger : <script> gsap.registerPlugin(SplitText) var split = new SplitText("#title-b", {type: "chars"}); var splitb = new SplitText("#title-bb", {type: "chars"}); gsap.fromTo(split.chars, { y: 0, }, { duration: 1, y: -38, stagger: 0.05 } ); gsap.fromTo(splitb.chars, { y: 38, }, { duration: 1, y: -38, stagger: 0.05 } ); </script>

I want to animate the background, but it is not continuous with the spaces between words. Is there a way that I can treat spaces as characters, so that they will be animated the same way. Thank you!!! To be as clear as possible I want the background of the spaces to be treated exactly the same as the rest of the characters

Hi All, I am new to GSAP. How do we create a text / heading animation like https://tobiasahlin.com/moving-letters/#2

Hello, im trying to use SplitText club plugin, but i can't make it work. I've searched in forum but no similar issue found. 1. Club token added to `.npmrc` //npm.greensock.com/:_authToken=xxxxxxx @gsap:registry=https://npm.greensock.com 2. transpile gsap in `nuxt.config.ts` build: { transpile: ['gsap'] } 3. Register plugins in `/plugins/gsap.ts` (this also doesn't work `/plugins/gsap.client.ts`) such as: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { SplitText } from 'gsap/SplitText' export default defineNuxtPlugin(() => { gsap.registerPlugin(ScrollTrigger) if (process.client) { gsap.registerPlugin(SplitText) } }) Everthing works fine in local build, but not in actual build on server, this is my error: * Also I find here https://github.com/hypernym-studio/nuxt-gsap/pull/41 this comment: (actually same error using nuxt-gsap) So maybe somehow `gsap/SplitText` is not visible for build ? I tried to make minimal repo, which is oddly working fine (just add authToken to `.npmrc`): https://stackblitz.com/edit/github-fhtp4t-jgbsnt?file=nuxt.config.ts,pages%2Findex.vue,.npmrc

Hello All, I need help on Gsap, if you see the link of codepen theres a hover on text, I want something like on this Site on the last section https://dimitriossykovaris.netlify.app/about Hover on the mail u will see the hover Thanks,

Hi GSAP community! Hope you're doing well! I would like have an answer about multiple paragraph animated with the SplitText module in react environment. In fact, i'm tryin to make a dialog box with multiple paragraph that I split to make an effect like in a video game. My problem is I would like to remove the previous paragraph before the new one start his animation so that it'll appear at the top of the dialog box. I made a codesandbox (sorry i didn't find a way to make it works with codepen) here : https://codesandbox.io/s/adoring-currying-12sedl? Is there a way to do that ? Thanks in advance.

Hello. I'm importing the Splittext js file, as explain on documentation https://greensock.com/docs/v2/NPMUsage?_fromLogout=1 , on an Angular environment. So i've: Insert the gsap-bonus package inside src folder imported in component using import SplitText from "./gsap-bonus/SplitText"; It generates this error though: Failed to compile. ./src/assets/libs/gsap-bonus/SplitText.js Module not found: Error: Can't resolve 'gsap/TweenLite.js' in '/Users/federica/Desktop/menatcode2020-menatcode-landing/src/assets/libs/gsap-bonus' So i've tried to import the SplitText.js file inside the UMD folder and it doesn't fails to compile but it throws an error on console: ERROR TypeError: _doc.createElement is not a function at _splitRawText (SplitText.js:423) at _split (SplitText.js:503) at _split (SplitText.js:496) Anyone could help me understand what's missing in the process? Thank you in advance

click to play button this video is play. But when close this video. click the closed (X) icon then this page jump to top. then scroll down jump to previous section (video section). Please check this youtube video: Previously i am using this code (link below) now its not working.

Just trying 2 different easy approaches to get this typewriter works like a charm! My issue is to sync both animations of the #text element and the chars and I do believe it is really simple to do! I am looking for an easy approach to take down this latency this animation is what i need to edit: // need to sync this block with the above animation gsap.from('#text', {width: 2, duration: 2, ease: SteppedEase.config(20) }) my target is to code this without the use of any other JS Libs like jquery

Hello! I am very thankful for Greensock forum to be so helpful for me before with my website. I've got +1 little moment of getting stuck in there without knowing what to do. I need to make on scroll text animation as on this reference website - https://www.joinsparq.com/ (as in "Say goodbye to labor fees" and other titles like this). I am using SplitText and trying to get the same effect, but I cannot achieve the same look of text getting from like... behind & bottom of the row and moving to the front & top? I am attaching a codepen of my current progress and that's how it looks when implemented on website (not quite it, right? ) - https://saltbox-new.webflow.io/workspaces I think the reference website itself might be using GSAP as well, but I don't seem to find it in their code, so will be glad to get any help or hint. Thanks in advance! P.S. An off question - is it possible to upload SplitText/SmoothScroll as CDN links? I am using sitebuilder, so cannot store files externally myself or upload them to the builder as well as pasting it as external code due to a limit of symbols.

I have this issue with SplitText where the text inside a <span> is breaking into another line and I have no idea how to fix it. According to the docs they spans shouldn't be a problem, but I don't know what is causing this In my example, the "this is the THIRD line" should be on the same line

Hey guys, I'm using SplitText plugin to show like a typing animation, the problem is that sometimes I have buttons inside the paragraph and the plugin is also typing those character when I don't need the text inside the buttons to have that animation. It's there a way to get avoid that text to be splited? I try several techniques, one was to remove the paragraph with the buttons outside of the SplitText animation, the problem there is that I need the movement to the next line

Hello, I'm new to GSAP and wanted a little bit of help with one of my projects. I'm trying to recreate the text animations in this codepen https://codepen.io/kh-mamun/pen/NdwZdW. There are seven different text animations in this codepen. If someone can help me by just recreating only one of the animations as I cant quite grasp how to perfectly time keyframes with staggered animations. Here is one of my trials for the animation called "revolveScale" in the codepen or also tagged with class "one": var char='.char'; var duration=5; var tl=gsap.timeline(); tl.fromTo(char,{x:-150,y:-50,rotation:-180,scale:3,opacity:0},{stagger:{amount:duration*0.6},x:20,y:20,rotation:30,scale:0.3,ease:'none'}) .to(char,{stagger:{amount:duration},opacity:1,ease:'none'},"<") .to(char,{x:0,y:0,stagger:{amount:duration*0.4},scale:1,rotation:0,ease:'none',delay:duration/char.length},`<+${(duration*0.6)}`);

Hi! How can i animate text from last character to first? I can't find any demo about it. Thank you!

Hi, I'm new here & need some help. I have attached my Codepen here. It's the Part of a bigger Menu. My Text is coming from Left to the Right, So is the is the all of effects & animations. Is there a way to Start the Opacity/Letter-spacing from Right (end of the sentence) to the Left side? So only Text will be Ease-in from Left to Right but all of the animation (Opacity/Letter-spacing) will go from Right to Left ? Sorry, if my question is confusing. Thanks.