Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrambletext'.



More search options

  • 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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 11 results

  1. 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 gsap.to(element, {duration: 1, scrambleText:"THIS IS NEW TEXT"}); //or customize things: gsap.to(element, {duration: 1, scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}});
  2. Hi, I have a small issue with the Scrambletext plugin using the wrong lengths for the text ( in an SVG ) Most of the strings start scrambling with too many characters, it also still happens if I define the 'text' parameter Can't work out why? Is there a workaround to force a specific length? Thought it may be to do with the tspans, but I experimented with removing some and it didn't seem to make a difference ?
  3. Is it possible to scramble text from one word into another using, say, a loop and an array of strings? And if, then how would I do that using the ScrambleText plugin? I mean letter by letter one at a time. It seems the initial text is immediately replaced by characters from the options object, and then from there on scrambled.
  4. I have a 1 text field that displays a number sentence, i.e. 1 + 3 = ?. I would like to scramble the first and second number using the scrambleText plugin. I can accomplish this with multiple text fields, i.e, one for "1", one for "+", one for "3" and one for "= ?". However, that approach is cumbersome so I put everything into 1 text field. Is there a way to scramble some of the text in a text field or is there another way to do this? In this approach I only get one text item to display: //I want to scramble these two variables in on textfield var temp_c:String = c.toString(); var temp_d:String = d.toString(); //numberSentence.text = c.toString() +" + " + d.toString() +" = ?"; numberSentence.text = temp_c +" + " + temp_d +" = ?"; //this line displays the text. TweenLite.to(numberSentence, 1, {scrambleText:{ text: temp_c, chars:"09", speed:2}}); //This only displays temp_c. //I would like to get scramble temp_c and temp_d, where temp_c = 1 and temp_d=3, 1 + 3 = ? I'm using actionScript.
  5. Thought I'd post in case someone else finds this useful. Using v0.4.0 of the scramble text plugin I was able to use multibyte emoji in the chars property string after modifying the following lines in scrambleTextPlugin.js: 1) this.chars = chars.split(""); to this.chars = [...chars]; 2) startText = endText.substr(0, ((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0); to startText = [...endText].slice(0,((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0).join(''); 3) endText = endText.substr(i, ((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0); to endText = [...endText].slice(i,((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0).join(''); Animation looks something like this now... scrambleText: { chars: '??????????????????✌✋?✊????❤????????????????????????????????☕???????????????♨?????⛽?⛵?✈?☀☁??☔⚡⛄??✨???⚽⚾??⛳?♠♥♦♣???????☎?????????????✂???♿?⚠?↗↘↙↖♈♉♊♋♌♍♎♏♐♑♒♓❗©®™????㊙??', ... } Makes use of the spread operator which is ES6, browser compatibility is listed near the bottom of this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator If anyone has improvements they'd be appreciated Also, haven't tested every emoji, but it seems to be working with ^ so far...
  6. I have a scrambleText span that animates a series of words successfully. However, as it plays, a neighboring div (#homeHeader) vibrates. This happens across Chrome, Safari and their iOS versions. The divs are styled using css grid and media queries and are meant to sit side by side on landscape and vertically stacked on portrait queries. Note that this "vibration" doesn't happen all the time, but I can't identify what makes it vibrate exactly. I've tried to force reloading of cache on the browser but that does not seem to impact it. As stated above, I've tried across different browsers and different devices. I've tried fiddling with tweenLength, but the words are 4-6 characters long so I would not think it would impact the divs sizes that much. In fact, when I look at the divs in Chrome's devTools I don't see their size change at all. Let me know if you need anything else to try to troubleshoot.
  7. I am trying to achieve a similar effect on the menu elements on this site: http://www.kikk.be/2016/ As you can see, the text scrambles, and goes back, This is my code here: $('h1').each(function() { var _this = $(this), mySplitText = new SplitText(_this, { type: "chars" }), newchars = '*?�><[]&@#)(.%$-_:/\\;?!azertyuopqsdghjklmwxcvbn'.split(''), randomchars = shuffleArray(newchars), letters = shuffleArray(mySplitText.chars), tl = new TimelineMax({ paused: true }); $(letters).each(function(index, element){ tl .to(letters[index], 0.02, {scrambleText: randomchars[Math.floor(Math.random() * newchars.length)]}, index*0.02); }); _this.hover(function() { tl.play(); },function() { tl.reverse(); }); }); function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } I am getting close, but it's taking some time Any help is appreciated.
  8. Hey folks, I'm using ScrambleTextPlugin with a wrapping paragraph of text: Working across design, development and interactive media, I build interfaces, websites, applications and open source experiments using web technologies. Currently there's no way to ignore spaces while scrambling, which means the last word of each sentence flicks between each line. For example: Working across design, development and interactive media, I build interfaces, websitesaoxooxoxxxoxxoooooxoxxxooxooxxoxxx xooxxxxoxooxooxxxooxxoooxxxxox Because the word website is tied to the remaining scrambled string. I believe ignoring spaces could solve that issue: Working across design, development and interactive media, I build interfaces, xoxoxoxox xoxoxoxoxxox xox oxox xxooxo xooxxoxoxox xoxox xox oxoxoxxoxoxox I have looked in the source, but I haven't been able to find a place where I could loop through the string before it is passed to the DOM. My goal would be to do something like the following (pseudo-code): if(actualText[indexOfLetter] === " ") { awesomeScrambledText[indexOfLetter] = " "; } Any advice would be really appreciated, and I'd love to add something like this into the actual plugin. If anyone has any suggestions that'd be awesome. Cheers, Charlie.
  9. Is there a way to use ScrambleText to animate the value of an <input /> element?
  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. Is there a parameter that tells scrambleText, to rotate from right to left? Esp in the case there is right justified. Or can you codepen a simple idea in it doing so?
×