Jump to content
Search Community

Gsap with Javscript split function

L.Lawliet test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm using javascript split function to create typewriter effect. I tryed documenaton but i really didn't stumble upon similar thing I'm asking. Is there any way to use gsap animation on every letter i pull fom text?

 


$(document).ready(function(){
  var x = "Some random text"
 
      typer(x);
       
    function typer©{
        
        $.each(c.split(""), function(i, letter){
           setTimeout(function(){  
           $('body').html($('body').html() + i + letter);
           },100*i);
        });
       
    }
    
});
 
Link to comment
Share on other sites

Sure, our SplitText tool is perfect for splitting HTML text into characters, lines, words and gives you lots of extra features like assigning new classes to the split elements, setting position to relative / absolute on new element, reverting the split text back to its un-split state, etc. SplitText also automatically creates Arrays of (chars, words letters) so its very easy to loop through these arrays or pass them to a stagger method

 

http://greensock.com/SplitText

 

demos: http://codepen.io/collection/KiEhr/

 

If you chose to split your own way, you can loop through each character and create a new TweenLite tween for each character OR pass the whole Array or jQuery object to a stagger method like

 

http://codepen.io/GreenSock/pen/HxzEl

 

For a very basic typewriter effect, you can just use our free TextPlugin

http://greensock.com/TextPlugin

http://codepen.io/GreenSock/pen/e86dfc30824e7eeb42cc0b0b57bd0e36

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...