Jump to content
Search Community

Search the Community

Showing results for tags 'splittext'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 139 results

  1. payne199

    SplitText issue

    I am putting together a simple (I thought) animation using SplitText. I am wanting a line of text to appear from left to right with a click of a button; and a line of text to disappear from left to right with a click of button. I got the appearing text to work, but I am having issues with the other. I can get the text to disappear as desired as desired, but it seems the only way I can get it to work is to have the text displaying on the screen, first. That is not what I want. I need the text to be invisible first, then appear from left to right after the button click. Here is my kinda-working code. Please see codepen. I have tried using css to set the opacity to zero and work from that, but I can’t get the text to appear at all from that angle. Could someone offer-up some insight?
  2. Hello everyone, May I ask for help. I have this splitText animation, but would love to have X and OPACITY animation to be with different duration. e.g OPACITY to be 1.5s but X to be 1s. https://codepen.io/styuit/pen/poybGqQ E.G. like with transitions https://codepen.io/styuit/pen/QWNEowJ Is there is any way to achieve multiple animations for same char? Thank you!
  3. Hi, This is my first time posting in the forum! I searched everywhere but could not find the answer so here goes. I want to animate a line of text on a motion path. At the moment it is not working as the characters all end up on top of each other. I think it has to do with the start/end within the path that's being set but I do not know how to add code to address this. (FYI my end goal is to animate the three lines of text on three different motion paths perhaps using the class for each line. Any help would be appreciated.)
  4. Is it possible to have a <span> or other inline element with a hard line break (<br> element) break correctly inside a SplitText element? For example, to have "ipsum" and "dolar" break correctly in my Codepen. I thought this was the answer, but the nestedLinesSplit function there didn't do the job.
  5. Hi, I am looking for a solution that combines the two different text animations like on the websites below, I am also using fullpage js. https://wirewerks.com/en/about-us/ https://21-capital.com/ So on each index of the page I am using if function for the animation, although without reverting the splittext it creates a duplicate each time i scroll to the specified animation page as it runs it again and again, that is why i had to revert it. Sorry for not being able to replicate the code work on codepen. var mainTitles = new SplitText('.strength-title h1, .free-session-title h1', { type: "lines", linesClass: "line line++" }); $('.strength-title h1 .line , .free-session-title h1 .line, .photobio-title h1 .line').wrap('<div class="line-wrapper">'); TweenMax.staggerFrom( mainTitles.lines, 2, { yPercent: 100, ease: Power4.easeOut, delay: 1 }, 0.25, splitRevert ); $('.strength-title h1, .free-session-title h1').css('visibility', 'visible'); var tp = gsap.timeline(), mySplitText = new SplitText(".photobio-title p", { type: "lines,words" }), chars = mySplitText.lines; tp.fromTo(chars, 1.5, { opacity: 1, y: 0, ease: Power4.easeOut, stagger: 0.15, // }, { // opacity: 0, // y: 100, // ease: Power4.easeOut, // stagger: 0, // }, "+=0"); // // function splitRevert() { // $('.strength-title h1 .line , .free-session-title h1 .line , .photobio-title h1 .line').unwrap(); // mainTitles.revert(); $('.photobio-title p').css('visibility', 'hidden'); mySplitText.revert(); } This formation is not currently working smoothly for me, if anyone has a possible solution please kindly do help me. Thank You
  6. Hi! I have an animation that reveal my texts line by line with SplitTextJs. The problem I have is that I have my paragraphs that are splited line by line but my lines wraps so one line is now 2 lines It happen mostly when I refresh the page without the cache. On my codepen I need to refresh more than once without the cache to get the problem. Also, sometimes I have a problem with the split when I have some words in italic or in a span. Thank you!
  7. Working on a project whereby a little creativity is called for. I have attached a zip file that contains the results of running forced alignment on a transcript using gentle that aligns an audio file to its transcript. I am looking for a way to "animate" the text as the speech is spoken in order to maximise the focus on the text being spoken as it is spoken. If someone looks away and comes back to it - they should be straight in. It is kind of like subtitles but for audio - except I want it to be as creative as possible. I originally had in mind - simply fading the text in and out whilst scrolling see the links to the examples I have tried out. Please also bear in mind that the actual audio may be over an hour long, so the animation needs to take into account the stream effect of keeping only the current text in focus (related to what is being spoken at the playhead). Any text that is not within 20-25 words of the word being spoken is not really relevant - unless it is and I'm not seeing it. Furthermore there are certain words that the forced-aligner does not pick up and marks them as <unk> - in the example "specialise" is an unknown word because it is spelt wrong. It is an American speaking so it should be spelt with a 'z'. However - there should still be a start and end number for the timeline. { "alignedWord": "<unk>", "case": "success", "end": 16.19, "endOffset": 301, "phones": [ { "duration": 0.69, "phone": "oov_S" } ], "start": 15.5, "startOffset": 291, "word": "specialise" }, http://jsfiddle.net/wuj6xqpz/18/ https://codesandbox.io/s/fervent-villani-vbero https://codepen.io/rustyleaf/pen/oNNwZpB 314a0bf1.zip
  8. Hey there! Can anyone help me with this? I am new to this thing, really trying hard to get my hands dirty with tweenMax. PROBLEM: I am trying to animate text in words by using SplitText, The thing i am trying to do is to change text on repeat. but can't do so. https://fastfoodsignage.herokuapp.com/ go to the second section, There is an animation, I am trying to give it YoYo effect, so it can look like a typewriter, and on repeat want to change innerHTML and update the splitText Codepen link: https://codepen.io/ifaizanahmed/pen/qBWgZGg demo1.mp4
  9. Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the properties of "text2__hidden" class, and animated. I have tried multiple iterations of the code to no avail. I even attempted resetting the position of the elements manually (as I successfully achieved with a svgMorph tween within the same timeline -not shown on the codependency extract) and quickly discovered how complex this would be given the characteristics of that particular tween (several parameters being animated and some of these include cycles). What am I missing? Thanks,
  10. Hello is there a SplitText Plugin for non NPM users? In the package downloaded there's only a JS Module about SplitText Thanks
  11. Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal
  12. Splittext will sometimes split lines in odd ways, leaving single words by themselves. Has anyone else had experience with this? I have seen other posts suggesting to add letter-spacing etc.. which may fix it at a certain container width, but it will still do it at other widths. Are nested inline elements supported if splitting by lines? The documentation says no, but the workaround that is suggested doesn't seem to work either.
  13. Hello, I'm encountering what I believe is a very similar issue to this thread, but I can't seem to get the applicable part of the solution to work in my context. I have some large hero copy in a narrow container with a hyphenated word that SplitText is unable to break apart. From what I'm reading in the linked thread, this is happening because the one "word" cannot be split into multiple divs, so I need to swap in a non-breaking dash character in for the regular one, but I'm not having luck pulling that part out into my demo. Attached a couple of screenshots in case the hyphenated word is not rendering at the same spot on your end in the Codepen example.
  14. Hi, I'm rather concerned about splitting a title (Hn) into separate letters. Can Google bots read the HTML generated ? Thanks for your feedback
  15. I've been a long time user of GSAP and have used the SplitText plugin on many projects. I've been learning React and more specifically the Gatsby library and have run into an issue I cannot solve. I setup this SplitText in my Gatsby project and it worked fine - then all of a sudden today it broke giving me a Type Error. I've downloaded the most recent GSAP library and Gatsby/ React is up to date as well. TypeError: null is not an object (evaluating 'parent.insertBefore') (I know this code below is partial - I ripped out a lot of excess code) import React, { Component } from "react" import { TweenMax } from "gsap/TweenMax"; import SplitText from "../utils/gsap/SplitText" export default class IndexPage extends Component { componentDidMount() { const split = new SplitText( 'h1, p', { type: "lines", linesClass: "ts-line" } ) TweenMax.staggerFrom( '.ts-line', 1, { y: "125%", opacity: 0, }, 0.25, ); } render() { return ( <Layout> <h1>Heading Text</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </Layout> ) } } Here is the error I'm getting: × TypeError: null is not an object (evaluating 'parent.insertBefore') _splitRawText src/utils/gsap/SplitText.js:428 425 | container = _doc.createElement("div"), 426 | parent = element.parentNode; 427 | > 428 | parent.insertBefore(container, element); 429 | container.textContent = element.nodeValue; 430 | parent.removeChild(element); 431 | element = container; View compiled _split src/utils/gsap/SplitText.js:505 502 | element._isSplit = true; 503 | return; 504 | } > 505 | _splitRawText(element, vars, wordStart, charStart); 506 | 507 | }, 508 | p = SplitText.prototype; View compiled _split src/utils/gsap/SplitText.js:498 495 | child.style.position = "relative"; 496 | } 497 | child._isSplit = true; > 498 | _split(child, vars, wordStart, charStart); //don't split lines on child elements 499 | } 500 | } 501 | vars.absolute = absolute; View compiled split src/utils/gsap/SplitText.js:527 524 | this._originals[i] = e.innerHTML; 525 | origHeight = e.clientHeight; 526 | origWidth = e.clientWidth; > 527 | _split(e, vars, wordStart, charStart); 528 | _setPositionsAfterSplit(e, vars, this.chars, this.words, this.lines, origWidth, origHeight); 529 | } 530 | this.chars.reverse(); View compiled SplitText src/utils/gsap/SplitText.js:132 129 | this.lines = []; 130 | this._originals = []; 131 | this.vars = vars || {}; > 132 | this.split(vars); 133 | }, 134 | _swapText = function(element, oldText, newText) { 135 | var type = element.nodeType; View compiled componentDidMount src/pages/index.js:41 38 | export default class IndexPage extends Component { 39 | componentDidMount() { 40 | > 41 | const split = new SplitText( 42 | 'h1, p', 43 | { 44 | type: "lines", View compiled ▶ 18 stack frames were collapsed. (anonymous function) /Users/leecampbell/Projects/Portfolio/Development/.cache/app.js:56 53 | const preferDefault = m => (m && m.default) || m 54 | let Root = preferDefault(require(`./root`)) 55 | domReady(() => { > 56 | renderer(<Root />, rootElement, () => { 57 | postInitialRenderWork() 58 | apiRunner(`onInitialClientRender`) 59 | }) View compiled This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Does anyone have an idea why this would be happening?
  16. Hello, I would like to know if it is possible to create my own HTML structure with SplitText. That is to say, instead of having a single div around each line, I would like to create 2 divs around each line. Thanks.
  17. Hey everybody, I have a question about to start a second timelineMax. I was discovering and trying out the splitText. Now I have a problem. I added a red text with "Move the box". I want this to appear after the start button has been pressed. I'm thinking about a postion parameter? I've tried many options, but I can't figure it out. This is the code of the red text. This must be appear when the start button is pressed. var tl= new SplitText("#box > p", {type: 'chars', charsClass: 'overflow'}); var tl = new TimelineMax(); tl.staggerFromTo('.overflow', 0.1, {opacity: 0, y: 50}, {opacity: 1, y: 0}, 0.05); Could someone help me out? Thanks in advance
  18. Hi again, my heros! Okay, so, I'm looking for a more dynamic way to accomplish this. I have a bunch of unordered lists that each need to animate-in separately (corresponding with some highlighted words in an h1), and I would like to animate them in by character, but also be able to pause after each line (list item) has completed. I know I can do this with a bunch of SplitTexts, but I'm positive there's a better way to do it than going line by line, right? In my Pen, each unordered list comes in line-by-line. What I would like to do is: 1. animate first keyword 2. stagger by-character first list item of first list 3. pause 4. stagger by-character second list item of first list …repeat for all list items of first list, then repeat all for next keyword and next list. A loop of some sort, perhaps? Thanks!
  19. Hi all! Quite desperate for some help on this! And a bit worried that there might not be a solution. I'm using SplitText (by character) with a serif font and the bits that overlap the next character (in my Pen it's the "f" in "transform") and that bit doesn't fill in until after the entire staggerFrom has completed. Any ideas? Thank you so much!
  20. Hi guys, for some reason I can't get the 3d transform perspective working on my splittext animation - see codepen... It only seems to be working in Chrome / Mac. Any ideas? Thanks!
  21. Is it possible to dynamically voice-over text that is animated using the SplitText plugin? If not, is there another way to simulate the effect of someone voicing over text that's being animated?
  22. PaoloDoma

    Split Text

    Hi, i try to use SplitText but it don't work. I made a simple page and i can animate the first text block var $Test0 = $('#test0'); var Test0Tl = new TimelineMax(); Test0Tl.from($Test0, 0.28, {x:100, delay:0.5, opacity:0, ease:Power1.easeOut}); But if i try to use SplitText with the second block it don't work var tl = new TimelineLite, mySplitText = new SplitText("#test", {type:"words,chars"}), chars = mySplitText.chars; //an array of all the divs that wrap each character TweenLite.set("#test", {perspective:400}); tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01, "+=0"); in my page there is <div id="scroll-container" class="scroll-container"> <div id="test0" style="margin-top: 100px; margin-left: 100px;margin-bottom: 100px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac lorem lectus. Aliquam placerat dignissim augue. Donec eleifend nibh lorem, ac porttitor erat porta eget. Vestibulum tempor ultrices massa, at aliquam metus sodales consectetur. Aliquam a accumsan tellus. Donec ac sem vitae metus condimentum efficitur. Nulla volutpat cursus ante, id facilisis dui euismod et. Suspendisse hendrerit, ante ac accumsan fermentum, libero magna vestibulum augue, vitae vehicula nulla nisl nec neque. Quisque lectus nisl, aliquet id pulvinar eu, tristique id lacus. Mauris egestas ipsum vel elit sodales faucibus. Duis aliquet tempus ullamcorper. Sed vitae porta erat, et suscipit tellus. </div> <div id="test" style="margin-top: 100px; margin-left: 100px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac lorem lectus. Aliquam placerat dignissim augue. Donec eleifend nibh lorem, ac porttitor erat porta eget. Vestibulum tempor ultrices massa, at aliquam metus sodales consectetur. Aliquam a accumsan tellus. Donec ac sem vitae metus condimentum efficitur. Nulla volutpat cursus ante, id facilisis dui euismod et. Suspendisse hendrerit, ante ac accumsan fermentum, libero magna vestibulum augue, vitae vehicula nulla nisl nec neque. Quisque lectus nisl, aliquet id pulvinar eu, tristique id lacus. Mauris egestas ipsum vel elit sodales faucibus. Duis aliquet tempus ullamcorper. Sed vitae porta erat, et suscipit tellus. </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> Any ideas? Thank's Paolo
  23. Hey there! First of all I've got to say GSAP is the most amazing animation library the web has to offer, so thank you GreenSock for the great work ! Back to the issue at hand, I've noticed an odd behavior when it comes to SplitText and the line splitting feature (could also be the case for chars and words) : as you see in the codepen that I forked from the actual GreenSock's demo, when you are splitting one element, the splitting is made inside that element, BUT if you are splitting several elements, the splitting is made outside and actually wraps the element (which is, I feel, the logical behavior). See screenshots* attached if you can't see the codepen. How do you feel about that? Is it a normal behavior to you? Having different splitting behaviors gets tricky when animating lines of copy that come from a CMS, as the number of lines that you feed SplitText with may vary… *Screenshots :
  24. Hello GSAP ! When splitting Denavagari characters, some weird circle elements are added. Any suggestions ? Thank you
  25. Hi, Is is possible in some straigh forward way to animate chars (or words) inside a line as an independent animation? Just stagger from the first word to the last in each line, rather than from the first word in the first line to the last word in the last line.. .. anyone understand?=) const elem = new SplitText(el, { type: 'lines, words' }) TweenMax.staggerFrom(elem.lines, 1, { y: 20 }, 0.1} And then TweenMax.staggerFrom(elem.lines.words, 1, { x: 20 }, 0.1} Rather than TweenMax.staggerFrom(elem.words, 1, { x: 20 }, 0.1} Would I need to do a new SplitText on each elem.lines?
×
×
  • Create New...