Search the Community

Showing results for tags 'splittext'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 96 results

  1. Lee Campbell

    React, Gatsby, and SplitText

    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?
  2. 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.
  3. 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
  4. jsciumi

    SplitText chars of each li in each ul

    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!
  5. 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!
  6. 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!
  7. nathanlord

    Dynamically Voice-Over Animated Text

    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?
  8. 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
  9. 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 :
  10. multivac

    Splittext and Denavagari

    Hello GSAP ! When splitting Denavagari characters, some weird circle elements are added. Any suggestions ? Thank you
  11. 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?
  12. kpendic

    Stagger letter effects

    hey I've built animation only with gsap + lettering.js, instead I have a feeling that I needed to buy License for GreenSock club,, I'm sending this so you can check if I'm not stepping outside of legal bounds with this (I've basically replaced splittext => lettering.js) https://codepen.io/kpendic/pen/xYwRey?editors=0010
  13. Hi, I have some banners to do where some words are removed from a block of text to give it a different meaning, the remaining words animating to their new position. As I've many to do with different massages and formats I'm trying to use splitText to do the job but so far getting the words to animate from their original position to their new ones once words are removed has eluded me! Got them animating OK but not from the correct, pre-word removal positions to their new ones in the flow. Any ideas or methods much appreciated. I'm setting innerHTML of spans to "" to remove selected words... Thanks!
  14. Guys, I don't understand this, using this simple splitText action inside a function, works fine on codepen but locally getting in browser console: TypeError: undefined is not an object (evaluating 'a.length') Any ideas? Set up is code in a local .js file correctly linked and working with other animations and html elements in index.html exactly as codepen example. 2 a.m. here so that might have something to do with it, not normally this dense... Buzz
  15. geddski

    SplitText dropping indents/formatting

    I'm needing to display formatted code with SplitText. Currently it strips out all my spaces. I've tried things like adding a bunch of "&nbsp;" but those get removed as well. I tried the pre tag but no luck either. How do I make it honor spaces/formatting like the docs say it's supposed to? (Note: I also have to add br tags any time I want line breaks, assuming its the same problem)
  16. bennyboy1978

    Need help with Slide show and splittext

    I've customized a slideshow and I'm using splittext to animate text out the current slide and then animate back in the new one. It works perfectly when "Next" is clicked but I'm having trouble with "Previous". The header's going out as planned but new one's aren't coming back in.
  17. ericshew

    splittext timing issue

    Greetings fellow Greensockers, I've been banging my head against this one for a while now. Greensock has been challenging for me! T The problem is that I am using splittext to go throw a series of messages and then I want to highlight a key section out of each one. I am using next / previous buttons to cycle through the various messages. The problem is that if a button is pressed when the cycle is in mid cycle, the results are erratic and janky. I notice that the revert command takes up quite a bit of time. If you rapidfire the button presses you can see how eratic the outcome is. I have tried to use the Isactive command to turn off the timeline if it is midsequence but I have not made it work. I would like help with two things: 1) disabling the previous / next buttons from having an imapct while the timeline is active (bigger priority) 2) put the highlight activation message into the main timeline (instead of calling it in the function that is called when the timeline is over) Here is the same problem in the project I am working on: http://whatcomhope.org/landing-pages/lockbags/ Many thanks!
  18. Gregor3637

    Hide each letter simultaneously

    Hello. I`m quite new to "SplitText Text Animation" in GS. I watched few of the tutorials and searched the web for some examples, but didnt find what I wanted. Basically what I want is to hide each letter after certain time simultaneously. I have attached a simple Codepen example that shows the effect I`m trying to get. Yet I want to accomplish this effect for every letter/char in a word/sentence. Is this possible ?
  19. Zuriel

    New Website Launched

    I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel
  20. HI All I have an issue with IE10 using splitText. When using splitText in IE the <br> tag get's ignored, this becomes a problem especially when I apply different positioning to each line. Indeed without the correct line break, I can't target specific lines and change their position or other CSS values. I did try white-space but that doesn't seem to work. Can someone please help me?
  21. flowen

    timeline problem with splittext

    hi! In the code pen you see an animation for the menu. I use the splittext plugin as you can see. First time you open the menu, everything animates as intended. But after closing once, the second time it seems like it's ignoring the timeline. Been fiddling with it for a long time but can't seem to figure it out. Anyone has a hunch of what's going wrong?
  22. gareth

    on compete of staggerTo

    I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?) This is what I have: tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf) function endOf() { console.log ('end of paragraph') }
  23. Hi everyone! I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars! I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!! I would very appreciate any kind of help. Thank you!
  24. dada78

    SplitText PlugIn Console error

    Hi guys, I am using the splitText plugin in a Rich Media expandable unit: I loaded the plugin after TweenMax in this order right before the bottom closing body tag for a rich media Doubleclick creative: <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> <script src="SplitText.min.js"></script> <script src="logic.js"></script> In the head I loaded the enabler necessary for the Doubleclick Rich media API to work as intended as usual... The ad works fine, the split text works as intended, it splits the lines and wraps the lines in classes. In the collapsed state it will run an animation that has the split text call in the ad's show() function: function show() { var mySplitTxt = new SplitText('#txt1C', {type:'lines', linesClass:'line++'}); var tlCollapsed = new TimelineMax(); tlCollapsed .set(mySplitTxt, {opacity:0.9}) //more stuff .staggerFrom(mySplitTxt.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=0.5') //more stuff } When previewing in the browser, no error appears. Only after I expand the ad I can see: Console Error: tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js:15 Uncaught TypeError: a.split is not a function This happens on expand: When the expand button is clicked, the unit expands and runs the tlExpand timeline. expandButton.addEventListener('click', onExpandHandler, false); var splitTxt1E = new SplitText('#txt1E', {type:'lines', linesClass:'line++'}); var splitLegal = new SplitText('#legal', {type:'lines', linesClass:'line++'}); var tlExpand = new TimelineMax({paused:true, overwrite:'all', onComplete:cardSheen}); tlExpand .set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block', visibility:'visible'}) .set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}) //more stuff .staggerFrom(splitTxt1E.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=1.3') function onExpandHandler(){ Enabler.requestExpand(); Enabler.startTimer('Panel Expansion'); } function expandStartHandler() { TweenMax.set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block'}); TweenMax.set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}); // add expanding animation here tlExpand.restart(); Enabler.finishExpand(); } I will try to stripped down codepen but in the meanwhile, any clues as to what could be happening that causes the error when the unit is expanded? Again, the animation works as intended. Thanks!
  25. iammarkmulvey

    trigger splitText within a slide show.

    How do I trigger splitText within this slide show so the animation only happens when slide is in view?