Search the Community
Showing results for tags 'splittext'.
-
The GSAP SplitText font-weight stagger animation on heading elements becomes noticeably laggy when applied to longer strings.
-
I have a sentence with three words, for example: Modern Watch Style I am applying one continuous gradient across the entire sentence using: background: linear-gradient(to right, #00ff1e 0%, #cf1512 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; So visually, the gradient flows smoothly from the first word to the last. Now I need to split the sentence into individual words (using GSAP SplitText or similar) so that I can animate each word separately (stagger, transform, etc.). But its not working correctly . If we are not using the gradient css code then the animation working fine . if anyone knows , Please help .
-
Hi everyone I’m trying to recreate the title animation no image only title from this website . I’ve already tried using GSAP + SplitText and made some progress, but I’m still not getting the exact wheel-style animation. https://www.accordion.net.au/about-us If anyone can help me refine the animation or point out what I should change in GSAP/SplitText to match the Accordion website effect more closely, I’d really appreciate it!
-
Hi everyone! I need some help. I want to recreate the words-carousel section like on the site: https://c2montreal.com/ It's a section with three titles Learn, Experience, Connect. Section is full screen and on scroll have SplitText in some like roller/carousel effect. Here is my CodPen (scroll): https://codepen.io/NGrdanjski/pen/XJXwyOq Thank you very much everyone.
-
Hello, Does anyone know how to handle spaces when scrambling split text? When a string contains a space the same amount of spaces is missing in the end of the animation. https://codepen.io/Dotmot/pen/wvOrqOy This animation is the same as this previous one but i did not account for spaces
-
Hey everyone, hope you're all well? Long story short, I need my headings to have the first letter capitalised automatically. Splittext overrides this and my headings default to all lowercase. e.g. .heading-style-h1::first-letter { text-transform: uppercase; } Is there a setting in split-text where I can make the first letter capitalised, or keep the styling? First time posting and a GSAP newbie so please be gentle! Thanks so much.
-
I'm having an issue with my SplitText and ScrollTrigger setup. The effect is to paint each line blue as the user scrolls. It renders perfectly on Chrome but on Safari (desktop and IOS), the line breaks happen in weird places. I recreated the animation in CodePen but couldn't replicate the issue in Safari, so not sure what's happening. For further context, I am building in WordPress using Bricks Builder, so there maybe a script conflict? Not sure, but any help is greatly appreciated! CODE: export function highlightTextOnScroll() { gsap.registerPlugin(ScrollTrigger, SplitText); document.fonts.ready.then(() => { SplitText.create(".scroll-highlight", { type: "lines", linesClass: "line", autoSplit: true, onSplit: (instance) => { const animations = instance.lines.map((line) => { return gsap.to(line, { backgroundPositionX: 0, ease: "none", scrollTrigger: { trigger: line, scrub: true, start: "top center", end: "bottom center", }, }); }); return animations; }, }); }); } CHROME: SAFARI:
-
Hey Everyone! Just trying to revert my splitText animations and triggers after resize. What am I missing here? Thanks, as always!
-
I am trying to do a Menu with an hover and a mouse leave functionality, using also SplitText. Works well for one item but when there are many and you move the mouse fast, it breaks I have tried killing the tweens but not working
-
I have a problem with how SplitText handles line breaks with Chinese characters. Please see the example below of how this same text looks with and without SplitText implementation. I suspect that is because of ， and 、 characters. They are not treated as line-breakable so something like this is treated as whole word 11.59系列发布五年以来，不断推陈出新，采用极具现代
-
Hello, I have a problem with ScrollTrigger. I want to achieve a similar effect to what you see on this page: Julian Fella in the section where the text "I HELPED COMPANIES GENERATE" appears. Currently, my container is pinned at the bottom, and the animation starts too early. I’m unsure how to delay it. Could you help me with this issue?
-
Hello everyone, first of all, I want to thank you all for the great insight you provide in this forum so generously. Secondly, please excuse both my English (as I am not a native speaker) as well as my approach to front end (since I am a level below beginner enthusiast). I was dabbling with TextSplit and ScrollTrigger, having a lot of fun, and trying to replicate elements I saw online. In the first pen below, there seems to be no issue (other than the fact that the section stops being pinned before the entirety of the text has been colored). Text Color Scroll #1 https://codepen.io/Aristidis-Lithoxoidis/pen/MWMYzez The same exactly with this pen. Text Color Scroll #2 https://codepen.io/Aristidis-Lithoxoidis/pen/jOjEQLe When I combine the two Text Color Scroll Combined https://codepen.io/Aristidis-Lithoxoidis/pen/JjQoeOY I start having problems. Namely, the second section (the one with a single column) appears -in a most snappy way - before the first section has even disappeared. And then, the second section appears again somehow further down. I have tried everything I could find online for two days now but nothing. The closest I got was when I changed the "end" attribute of the first script to "end: "bottom +=1000px"", but that doesn't seem ideal. I am sure there is a very easy way of fixing - a problem that most probably I created myself - but couldn't find anything online. Thanks in advance.
-
Splittext indents normally invisible spaces wrapped onto new lines
plindelauf posted a topic in GSAP
I'm using the following command to initialize SplitText: new SplitText(".content_wrapper", { type: "words,chars,lines", position: "absolute" }) on the following DOM element: <div class="content_wrapper" style="width: 365px; height: 224px; opacity: 1; perspective: 400px;">Some text that indents with SplitText</div> What goes wrong is the following: The line splits between the word "that" and "indents" SplitText indents the word "indent" with 10px if it thinks that the space between "that" and "indents" does not fit behind "that" anymore. The effect is shown in the attached screen shot and highlighted with the red box. If you make the parent div a bit wider, you can get to the point where SplitText *does* think the space fits behind the word "that" and then the word "indents" is not indented. The problem is related the the following style setting: white-space: pre-wrap; Could you please have a look at this problem and (hopefully) solve it quickly. It goes wrong in a lot of our use cases... Thank you. Pascal.
-
Are there any issues animating h1 <h1 id=“txt1”>SplitText <br>text.</h1>, or is it best practice to always use divs <div id=“txt1”>SplitText <br>text.</div> when animating with splittext? Thanks
-
Hello, I would like help understanding how to create a hover effect in the text similar to the footer of this site (https://danielvaszka.com/). Can someone help me?
-
Hello! I want to layout some text on an SVG path and have an animation play in a loop, on hover. On mouse out, the text should go back to its initial state. I used SplitText and the MotionPath plugins in my CodePen and it looks kind of what i want, but i have the following issues: Timeline related: The intended initial layout, is the one you'll see if you comment out addPause (line 44). I thought i'd probably need to change the startTime of the timeline, but that's not working. What am i missing? On mouseout, i'd like to tween the timeline to its initial state (the corrected initial layout), but again not working as expected. Any ideas? SplitText & MotionPath related: Right now the letter & word spacing is off. It's tight to the stagger values. So how can i maintain the default ones? (This animation is intended to work with words of different lengths). Is there a callback i could use onResize that would re-calculate the correct position of the letters? Any help in any of the above would be much appreciated Thanks in advance
-
Hi, I'm rather concerned about splitting a title (Hn) into separate letters. Can Google bots read the HTML generated ? Thanks for your feedback
-
Hi there! I'm using astro + https://vuejs.org/ components and swup.js for page transitions. I'm also using GSAP for animations I've found a problem while navigating. On first load, text in "TransformAnimation.vue" prints with animation and everything looks and works cool. If I then go to some other page (About, blog..) the text disappears even though js runs and works correctly I thought it was because of swup, but I've seen that if I comment/delete the SplitText GSAP part, the text always appear... I don't get why my GSAP code is deleting the text? :/ I leave a minimal demo(thanks @GreenSock): https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Fblog%2Findex.astro,src%2Fcomponents%2FTransformAnimation.vue,src%2Fcomponents%2FHeader.astro Thanks!
-
I modified the official `splitText` example so that the text is not displayed by default, when the `show` button is clicked the text is displayed, when the `disappear` button is clicked the text disappears, then when I click the `show` button again the text is not displayed, I want to click the `disappear` button and then click the `show` button to display the text again, how should I modify it? Thanks
-
Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch is not a solution in this case. At least, is it possible to achieve in web development? It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E` Any help or suggestions please ?
-
Hello, first time asking here, hope I'll do it well ^^ On my pen, I successfully got a sliptText animation starting when mouseenter the black box. But at first, I was expecting the sliptText animation starting when #creation enters in viewport (using ScrollTrigger) which isn't the case here. Any ideas ?
-
Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks
-
Why does onStart callBack is triggered for the first element passed in array.
Jim Tim posted a topic in GSAP
Hello Team , Why does onStart callBack is triggered for the first element passed in array. tl.set([...chars], { opacity: 0 }) tl.to([...chars],{ opacity: 1, ease: Linear.easeNone, willChange: "transform, opacity", immediateRender: false, onStart: placeHand, stagger:duration / chars.length, duration : (duration/chars.length) }); in version 2 it gets called for every element that has been included in the array, if in v3 it triggers only for the first element then what will be the fix, i want to call the onStart callback for every element in the array. -
How to responsively reveal text controlling for line and letter
Chris Heuberger posted a topic in GSAP
Hi all, I have a working prototype using GSAP SplitText (displayed at the bottom of this post) which stagger-reveals a title, by changing position and opacity of each letter individually. What I'd like to do is mimic the text reveal animation here: http://loveforiceland.com/ which animates each line simultaneously while still stagger-revealing each letter. And the way the letters are revealed are by moving up from behind a kind of mask instead of fading in by animating the letter's opacity. This example gets close: https://codepen.io/camcgreen/pen/qBqMPQp but reveals each line as a whole instead of letter-by-letter. Additional requirements: 1. <a> tags be preserved in the title (as they are in my prototype) 2. The title must be responsive which I imagine means the initial markup can't be grouped by line since line breaks will depend on screen width. Is this possible with GSAP? Thanks! -
Hi! I'm having problems with some Vue components in Nuxt and SplitText. I'll try to explain: I have a global mixin that detects all [data-animation] elements with the scroll and fire an specific animation. Some of these elements are components and ha. This works fine when I use opacity, X and Y, scale, etc... but when I use Split Text it doesn't. I got an hydrate error and the animation doesn't work. This is the code for the animation: if (elm.dataset.animation === 'lines-down-up-mask'){ var split = new SplitText(elm, { type: "lines", linesClass: 'lineParent' }); var split_parent = new SplitText(elm.getElementsByClassName('lineParent'), { type: "lines", charsClass: 'lineChild' }); gsap.set(split_parent.lines, { y: '110%' }); gsap.to(split_parent.lines, { scrollTrigger: { trigger: elm, scrub: false, start: 'top bottom', }, stagger: { each: 0.1, ease: 'power1.in', y: 0, }, onComplete: function(){ split.revert(); } }); } This is one of the components: <Partners data-bg-color="white" data-text-color="black" data-logo-color="black" data-scroll-section :title="partnerList.title" :partners="partners" /> And inside the component I have this: <template> <section class="partners"> <div class="headline headline--4 partners__title" data-animation="lines-down-up-mask">{{ title }}</div> <MovingMarquee :images="partners" partner_logos /> </section> </template> I hope someone could help me, because I don't know why it happens :( Thanks
