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

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

Categories

  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 8 results

  1. 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.
  2. Emoji with ScrambleText Plugin

    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...
  3. 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.
  4. Random ScrambleText and back

    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.
  5. Ignore spaces in ScrambleText

    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.
  6. Is there a way to use ScrambleText to animate the value of an <input /> element?
  7. scrambleText & htmlText?

    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. 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?