Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'Text'.

  • 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

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

  1. Hello, We have been using the Greensock library in an Adobe AIR application for a while now with really no problems. We decided to try our Windows based application on an Android device and found that most things work quite well. The only problem we are seeing with the Greensock library turns up when we use scale effects. By this, I mean any time I attempt to scale a SplitTextField from say 4 to 1, the system lags. If I scale multiple SplitTextFields at once and by letter, then system can almost crash. The board we are using is running one of the latest version of Android and is capable of outputting HD content. Below is the code for one of the animations being affected. Each letter should scale down and rotate in, staggered. // target is the object we are going to animate // time is the total amount of time for the animation public static function MyEffect(target:SplitTextField, time:Number):TimelineMax{ // Activate plugins TweenPlugin.activate([TransformAroundCenterPlugin, AutoAlphaPlugin]); // Create new TimelineMax Object var t:TimelineMax = new TimelineMax(); // Determine how long each letter should animate var timePerHold:Number = time / target.textFields.length; // Go through each textField in the SplitTextField and complete the following animation for(var x:int = 0; x < target.textFields.length; x++){ // Use 20% of the time to rotate the text and scale the text half way t.fromTo(target.textFields[x], timePerHold * .2, {transformAroundCenter:{scale:4, rotation:-180}, alpha:0}, {transformAroundCenter:{scale:2, rotation:0}, alpha:1}); // Use 80% of the time to finish scaling the text t.to(target.textFields[x],timePerHold * .8, {transformAroundCenter:{scale:1}, ease:Elastic.easeOut}); } return t; } I was going to do my best to optimize the system but I wanted to go about it the right way and not just start guessing how to fix this. Any thoughts or direction would be greatly appreciated. Thank you!
  2. I'm trying to come up with a lightweight "news ticker" type of animation. Just maybe 2 different lines of text, one replacing the other in a loop. No problem with the looping or the use of the TextPlugIn. But the docs allude to how one can create custom delimeters to change the way the animation works with the text. I've played around with the jQuery news tickers out there, but thus far, none of them seem to work reliably in the context of a client's e-commerce site, which apparently was constructed by someone who had no real concept of good HTML5 coding practice. I have a different TweenMax animation running on that site now, so it wouldn't be an issue to just write a different TweenMax animation - it just works. How do custom delimeters for theTextPlugIn work? TIA!
  3. I'm basically a noob, but this should be easy and I'm suffering from two days of head-bashing. I'm trying to loop through an array of text values in absolutely positioned elements. The start and return tween positions are based on the width of the elements, which of course change when the text within them changes. I'm using TimelineMax and addCallback to change the text. But I can't figure out how to get the updated element width back into the tween. See attached Codepen -- the element to the right of the red text should bounce back to the right edge of the new text, not the old text. I'm sure I'm missing something basic... http://codepen.io/vanadu/pen/dYmKBb BTW the red text has to have a fixed position, so floats and relative positioning is out...unless I missed something there too. Thanks for any pointers...Vanadu
  4. Hello, I just figured out that I can save an illustrator file with live text as an svg image with an embedded font! It seems to work in all browsers that support svg. This seems a great way to have the text pixel perfect without having to use a static image (png24). My next thought was to use SplitText, since svg is a dom element with tags and so on. But it's not supported. ;..( I know "it's a different beast", but at the end of the day it's also just text. Sentences, words, individual letters... Are there plan to supports svg text with SplitText? If not, how would I animate svg text and individual letters otherwise?
  5. Hi all I'm a new member I need to animate text with Gsap. I know of SplitText plugin, but unfortunately I am not a premium member. I found blast.js that it's perfect for my needs: http://julian.com/research/blast/ Is it possible to use it with Gsap? If yes, can You provide me an example, please? Thanks in advance
  6. Hi! I have a static svg that I add some content to from JS and then I move it a bit in a tween. I have mainly svg texts and svg rect-s with a gradient filled each with. The main idea is to slide the rect and then the texts to their final position. Well this works just fine with Firefox, but Google Chrome fails to move the texts. Although I am able to move texts with jQuery like $('.foo').attr('y', $('.foo').attr('y') + 100); but not with tweenmax. Any thoughts? Regards, Robert
  7. Hello, I can get scrambleText to work perfectly in my AS2 project. But does it support htmlText at all? I've looked through the documentations and whatnot, and can't find anything stating one way or the other, so I'm guessing no? If not, would it be possible to modify the plugin in order to get it to work somehow? I seem to remember Tweener having this functionality, but it's been so long I can't be certain anymore. Any help please? Thanks!
  8. rosyTown

    TextMetrics

    Is there a TextMetrics plugin/class coming soon? Something we can use to measure heights, widths, spaces etc of DOM text with differing fonts and sizes? If there is already a trustworthy one out there, what is it? Cheers, Rosy.
  9. I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately. Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result. Since I am new to Greensock, I am not sure which approach to take to accomplish this. Is Split Text necessary or would a method using Split Text produce smoother results than the alternative? Any guidance or examples to help get me started is appreciated. When I get something to work, I will post it to CodePen. Below is a list of some of the features I am trying to incorporate: Start at right of div, fade in letters and scroll from left to right. At left of div, letters fade out of display. First list item starts right after last list item without break in list. List repeats indefinately. Mouseover list causes the list scroll to pause. Seems simple enough but I have no clue how to tackle this. Thanks, James
  10. I have added dynamic text to my TransformManager, is it possible to change the size of dynamically added text ?
  11. GreenSock

    TextPlugin

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Tweens the text content of a DOM element, replacing it one character at a time (or one word at a time if you set the delimiter to " " (a space) or you can even use a custom delimiter). So when the tween is finished, the DOM element's text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted. Here is a simple example of replacing the text in yourElement: //replaces yourElement's text with "This is the new text" over the course of 2 seconds TweenLite.to(yourElement, 2, {text:"This is the new text", ease:Linear.easeNone}); If you'd like to use a different delimiter so that instead of replacing character-by-character, it gets replaced word-by-word, just pass an object with configuration properties like this: //replaces word-by-word because the delimiter is " " (a space) TweenLite.to(yourElement, 2, {text:{value:"This is the new text", delimiter:" "}, ease:Linear.easeNone}); You can even add a new css class to the new text as it comes in. Learn more in the TextPlugin documentation.
  12. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right). Visually it looks like a computer decoding a string of text. Great for rollovers. See the Pen GSAP Scramble Text Plugin - feature plugin page by GreenSock (@GreenSock) on CodePen. You can simply pass a string of text directly as the scrambleText and it'll use the defaults for revealing it, or you can customize the settings by using a generic object with any of the following properties: text : String - the text that should replace the existing text in the DOM element. If omitted (or if "{original}"), the original text will be used. chars : String - the characters that should be randomly swapped in to the scrambled portion the text. You can use "upperCase", "lowerCase", "upperAndLowerCase", or a custom string of characters, like "XO" or "TMOWACB", or "jompaWB!^", etc. (Default: "upperCase") tweenLength : Boolean - if the length of the replacement text is different than the original text, the difference will be gradually tweened so that the length doesn't suddenly jump. For example, if the original text is 50 characters and the replacement text is 100 characters, during the tween the number of characters would gradually move from 50 to 100 instead of jumping immediatley to 100. However, if you'd prefer to have it immediately jump, set tweenLength to false. (Default: true) revealDelay : Number - if you'd like the reveal (unscrambling) of the new text to be delayed for a certain portion of the tween so that the scrambled text is entirely visible for a while, use revealDelay to define the time you'd like to elapse before the reveal begins. For example, if the tween's duration is 3 seconds but you'd like the scrambled text to remain entirely visible for first 1 second of the tween, you'd set revealDelay to 1. (Default: 0) newClass : String - if you'd like the new text to have a particular class applied (using a <span> tag wrapped around it), use newClass:"YOUR_CLASS_NAME". This makes it easy to create a distinct look for the new text. (Default: null) oldClass : String - if you'd like the old (original) text to have a particular class applied (using a <span> tag wrapped around it), use oldClass:"YOUR_CLASS_NAME". This makes it easy to create a distinct look for the old text. (Default: null) speed : Number - controls how frequently the scrambled characters are refreshed. The default is 1 but you could slow things down by using 0.2 for example (or any number). (Default: 1) delimiter : String - by default, each character is replaced one-by-one, but if you'd prefer to have things revealed word-by-word, you could use a delimiter of " " (space). (Default: "") //use the defaults TweenLite.to(element, 1, {scrambleText:"THIS IS NEW TEXT"}); //or customize things: TweenLite.to(element, 1, {scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}});
  13. I made a transition animation in a few boxes in my site and it's making my texts remain in effect blur and blur. Can anyone help me? This is the site: www.krawczuk.com.br / koletivo-creative. Thank you!
  14. Hi Guys, I noticed that when a rotated div containing text is animated the text appears pixelated, somewhat rugged; if I apply Draggable.create to the div, the text becomes smooth. Is it possible to have the text appear smooth before using Draggable? See this pen: http://codepen.io/anon/pen/dxKHn - after running it the text is pixelated, if you click on the green box then Draggable is applied and the text suddenly becomes smooth. Thanks, Elior
  15. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE8. Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Configuration options 6:35 Animation View the JS panel in the Codepen demo above to see how easy it is to: Split text into words and characters. Pass the chars array into a TweenMax staggerFrom() tween for animation. Revert the text back to its pre-split state when you are done animating. Additional features and notes You can specify a new class to be added to each split element and also add an auto-incrementing class like .word1, .word2, .word3 etc. View demo You don't have to manually insert <br>tags, SplitText honors natural line breaks. SplitText doesn't force non-breaking spaces into the divs like many other solutions on the web do. SplitText is not designed to work with SVG <text> nodes. Learn more in our detailed SplitText API documentation. Please visit our SplitText Codepen Collection for more demos of SplitText in action. Where can I get it? SplitText is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools like ThrowPropsPlugin as well, so check out greensock.com/club/ to get details and sign up today. The support of club members has been critical to the success of GreenSock - it's what makes building these tools possible.
  16. marko

    Changing Text

    hi I'm working on an animated timeline, as it plays there is a div showing month of the year, how do I change the text of that div as it plays ie .set("#month",{text:"February"},"feb") doesn't work or how do just go & ask a bit of jquery to do the job? thanks Mark
  17. silverd

    Text Animation

    Hello thanks for your work it's so great i just have a question i would like to do a animation from this : http://csswarp.eleqtriq.com/ to the text not curve (standard) how i can do this ? Use "straggerFrom" for all letter ? any ideas ? thanks for help
  18. Hi, Is it possible to animate an existing text weight from regular/normal font weight to bold style? Either in the Actionscript or Javascript version? I have a sentence where I need to "bolden" a keyword and it would be nice to animate it with an effect rather than just switch. Thanks, Attila
  19. Hello, I'm trying to transform a text input field that should resize the text font size when scaling the transform item, and that should resize itself when the user writes text in it. To resize the text field i set the "autoSize" property to true, and to increase the font size i wrapped the text field with a movieclip and then add that to the TransformManager. Here is my code: //create the font format var font: Font = new FuturaStdBold(); _textFormat = new TextFormat(); _textFormat.size = 18; _textFormat.align = "center"; _textFormat.font = font.fontName; //Create the text field _textField = new TextField(); _textField.width = 200; _textField.height = 40; _textField.x = 100; _textField.y = 100; _textField.type = "input"; _textField.multiline = true; _textField.embedFonts = true; _textField.autoSize = TextFieldAutoSize.CENTER; _textField.defaultTextFormat = _textFormat; _textField.text = "Ingresa tu texto aquí..."; _textField.addEventListener(Event.CHANGE, keyStroked, false, 0, true);[/font] [font=arial, helvetica, sans-serif]//[/font][font=arial, helvetica, sans-serif]_mcConte is the wrapper for the text field[/font] [font=arial, helvetica, sans-serif]_mcConte.addChild(_textField); //add the item to the stage _container.addChild(_mcConte); //add the item to the transformManager _transItem = _transManager.addItem(_mcConte); _transItem.hasSelectableText = true;[/font] The resize of the text field works fine, however the scaling does not. When i try to scale the item and it has some rotation, the text field gets out of the transformManager Box, but if i set "hasSelectableText" to false, then the scaling works but i cant input text. Any help would be greatly appreciated. I attached some screenshots of the problem.
  20. I found a 'bug'. In case two divs are placed on top of each other and the opacity of both is animated, text in the upper div will dissapear when the tween is completed. I tested this 'bug' in serveral browser and effect was the same overall. The workaround is to set the opacity to '0.99' instead of '1': new TweenLite(myText, 2, {css:{opacity:0.99}, delay:3}); PS. In the bottom div contained a image, the upper div is only text.
  21. Hi, I'm having a problem transforming a text field. When i move or scale the text field everything is fine, but when i rotate it, the text disappears. This is how i'm creating and adding the text field: //Create the text format var textFormat: TextFormat = new TextFormat(); textFormat.size = DEFAULT_TEXT_SIZE; textFormat.align = DEFAULT_TEXT_ALIGN; textFormat.font = DEFAULT_TEXT_FONT; //Create the text field var textField: TextField = new TextField(); textField.width = DEFAULT_TEXT_WIDTH; textField.height = DEFAULT_TEXT_HEIGHT; textField.x = (mc_stage.width - textField.width) / 2; textField.y = (mc_stage.height - textField.height) / 2; textField.type = "input"; textField.multiline = true; textField.wordWrap = true; textField.defaultTextFormat = textFormat; textField.text = "Ingresa tu texto aquí..."; //Add the field to the parent moveiclip mc_stage.addChild(textField); //Add the field to the transform manager var transItem: TransformItem = _transManager.addItem(textField); transItem.constrainScale = false; _transManager.selectItem(textField); Any idea of what may be happening? Tank you.
  22. I'm looping through all the items of my XML and use LoaderMax to load my SWFs onto stage, and trigger a function to generate video items and text items. This looks like this: for each (var item in Main.XMLLiveItems.items.*) { if (item.@type == "static") { Main.queue.insert(new SWFLoader("media/"+item.@name, { name:item.@id, container:area, alpha: 0, onComplete: itemLoaded }),item.@level); } else if (item.@type == "text") { createTextAsset(item); } else if (item.@type == "video") { createVideoAsset(item); } } However, this messes up the levels since LoaderMax loads the queue after my textassets and videos have been loaded onto stage. I can't add the text assets or the video assets to my stage (called area) when specifying the index, because the number of children is still zero when the createTextAsset and createVideoAsset functions are called. I've tried to first use 'applyFullXML' and then add the textfields and videoloaders as a child to the placeholders. This turned out the way I wanted, except the textfields did not scale properly (using the scaleWidthAndHeight property) since they were now a child of a sprite. I am currently not sure what to do so was hoping for a push in the right direction. Thanks again.
  23. Hey guys, I have the TransformManager in an application, that will edit text fields. My idea, is to have text, selectable by the TransformManager. Then within another component, alter the text object, with a font drop down, colors, text, etc. My issue I'm seeing, is once the text TransformItem is selected, then any other item clicked on, it deselects the text TransformItem. Does anyone have any thoughts or ideas how I would accomplish this? I've thought, I could store the item in an object, and just make the edits, and they could change the text, without the text TransformItem actually being selected, which is fine, it doesn't necessarily need to be selected the whole time, I just need a pointer so it knows what item to change. The visual problem with this, is the handles are removed from the item, showing it is no longer selected, so it could be confusing on which item is being altered. Any suggestion on how I might either keep the item selected with the TransformManager, while clicking other items and not deselecting the item, or show that the item is still 'selected' even when the TransformManager releases it? Thanks
  24. I new to the GSJS and I am trying to tween the opacity of a div that as text in it. I have not been able to get the text to change with any css changes. Here is a sample of my code below. Could anyone tell me what I am doing wrong. Thanks. function init() { var title = document.getElementById("logoTitle"); var logoBar = document.getElementById("logoBar"); var subTitle = document.getElementById("subTitle"); var logoNumber = document.getElementById("logoNumber"); var nav1 = document.getElementById("s1navOne"); var nav2 = document.getElementById("s1navTwo"); var nav3 = document.getElementById("s1navThree"); var nav4 = document.getElementById("s1navFour"); var nav5 = document.getElementById("s1navFive"); var mainInfo = document.getElementById("mainInfo"); var logoTL = new TimelineMax({delay:.4}); logoTL.from(logoBar, .5, {css:{transformOrigin:"bottom", scaleY:"10"}, ease:Sine.easeOut}) logoTL.from(title, .5, {css:{alpha:0, marginLeft:"-50px"}, ease:Back.easeOut}, -.3) logoTL.from(subTitle, .5, {css:{alpha:0, left:"50px"}, ease:Back.easeOut}, -.3) logoTL.from(logoNumber, .5, {css:{alpha:0, marginTop:"20px"}, ease:Back.easeOut}, -.3) logoTL.from(nav1, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.3) logoTL.from(nav2, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav3, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav4, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav5, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.to(mainInfo, 1, {css:{alpha:0}}) <div id="mainInfo">This is the text I have</div>
  25. Hello, I have difficulty using the TransformManager.SCALE_WIDTH_AND_HEIGHT feature. Perhaps I have not understood the documentation or this is not the mission of this feature. What I want is to scale an object containing text that the text does not scale, eg import com.greensock.transform.TransformManager; import com.greensock.transform.TransformItem; import com.greensock.events.TransformEvent; var _manager:TransformManager = new TransformManager({hasSelectableTex:true}); var item:TransformItem = _manager.addItem(textBox,TransformManager.SCALE_WIDTH_AND_HEIGHT,true);//textBox is a movieClip that contains a text field item.addEventListener (TransformEvent.SCALE, onUpdateItem); function onUpdateItem (event:TransformEvent):void { trace (textBox.width,textBox.height,textBox.scaleX,textBox.scaleY); } I appreciate your help I attach a basic example of what I try to do. [Deleted example because it contained TransformManager files, thus granting free access to anyone in the forums]
×