SplitText is a dependency-free plugin for Greensock that will separate a block of text into groups of characters, lines or words. These groups can then be independently animated. Sarah demonstrates how combining SplitText with a Timeline can lead to rick story-telling animations.
- Animating text and relative color value,…so not necessarily both of those things, but both.…Animating text is really nice along with some animation.…I use it a lot to do narrative storytelling.…The nice thing about this plug-in, split text,…is it has no dependencies on GSAP.…You can use it to just animate these things in CSS…or you can use it to animate in another library.…You can actually just use it to split apart your text.…
It has support back to IE8, which is pretty nice.…You can either break it into characters, words or lines…and it kind of honors the way that it is in the layout,…so line breaks and stuff.…You can have an option to create auto-incrementing classes.…So, if you need to target things specifically,…it's basically like wrapping each one in a class,…and it'll be like word one, word two, word three,…I think I put, yes, character one,…character two, character three.…
That's pretty nice if you're gonna do some,…get in there and really do some nitty gritty and fun stuff.…The very, very basic one would be like…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values