Jump to content

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


  • 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


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).
  2. I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place. And not sure what's the best search term for this. I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG? What is the best technology for this and where should I be investigating? - - - *Updated: I have found the article for it. It is done with CSS. I wonder GSAP can do the same too? https://css-tricks.com/reverse-text-color-mix-blend-mode/
  3. Hi, Guys, My CodePen's here: http://codepen.io/WW/pen/NNxEXm While the mouse moving on body, there's a little blurry happening with text. is there any possible to remove the blurry? Thanks for ur kindly help.
  4. Hello there, after wasted hours of google searching, i will try to find help here: I just started with GSAP and i absolutely love it. But there are two problems which only appear on firefox: I'll post this link as well, because i dont think it's clearly visible in codepen: http://markmaurer.de/tween/ Problem 1: The animation is REALLY laggy and unsmooth in FF. It looks weird... Problem 2 (not visible on codepen): Text rendering, aliasing, smoothing or whatever changes after the animation is finished. Looks also weird? Everything works smooth on this page: http://www.riiotlabs.com/... So it should be possible to do smooth animations on FF. I've tried almost everything i could find in google but nothing worked. What am i doing wrong? Thank's a lot in advance for any help! Kind regards Mark
  5. 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!
  6. 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!
  7. 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
  8. 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
  9. 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
  10. 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!
  11. rosyTown


    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.
  12. 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
  13. I have added dynamic text to my TransformManager, is it possible to change the size of dynamically added text ?
  14. 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!
  15. 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
  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]