Had a little look at the JS powering the code typing animation on https://stripe.com/issuing . They: 1. Declare an array of { DOM selectors (the place to type), text (to type), vertical scroll position (position of text to scroll the container to }
-
Show this thread
-
2. Set a timeout that grabs the next item from the above array, works out how many letters in the text property, scrolls the container to that DOM element (translate3d), then staggers a timeout to type it smoothly. When all the letters are typed, it moves onto the next text
2 replies 0 retweets 5 likesShow this thread -
It's all direct DOM manipulation (lib free for the most part), no React/Vue et al.pic.twitter.com/UuGTyqJiwu
1 reply 0 retweets 20 likesShow this thread -
Simple techniques for peeking behind the curtain: 1. Inspect element on the animated DOM item, go to Source tab, look through scripts, Prettify the code, search for the DOM selector, go from there. It's not that easy because it's minified, but you can follow along a-ok.
1 reply 0 retweets 4 likesShow this thread -
It may not be the slickest way to approach the solution, but it really shows that their design skillz are so good, that the stunning execution masks the implementation.
4 replies 0 retweets 5 likesShow this thread
Seems pretty slick to me. Simple enough to explain in a tweet, no frameworks needed. Doing more with less. 
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
