Search the Community
Showing results for tags 'scrambletext'.
Found 11 results
-
Hello, I would like some advice on my current issue, here is my requirements for my issue: the #section2 needs to be ScrollTriggered each animation from span/h2, each scramble needs to be finished on scroll, not stopping while there is scrambled text (sometimes you scroll a bit and it stops on some scrambled text) each span/h2 needs also to be ScrollTriggered, so each animation needs to be finished (forcibly?) before it trigger the following span/h2 on the following staggered element (1st span animate, stops. Scroll wheel, 2nd span animate. Quick scroll wheel, following animation quickly animates) It also needs to be pinned until the whole timeline is finished. Hope you guys can help me with this issue, thank you very much!
-
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 ?
-
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.
-
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. -
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...
-
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.
-
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.
-
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.
-
Is there a way to use ScrambleText to animate the value of an <input /> element?
-
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!
-
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?
