PaoloDoma

Split Text

Recommended Posts

Hi, i try to use SplitText but it don't work.

I made a simple page and i can animate the first text block

 

var $Test0  = $('#test0');

var Test0Tl = new TimelineMax();

Test0Tl.from($Test0, 0.28, {x:100, delay:0.5, opacity:0, ease:Power1.easeOut});  

 

But if i try to use SplitText with the second block it don't work

 

var tl = new TimelineLite, 
    mySplitText = new SplitText("#test", {type:"words,chars"}), 
    chars = mySplitText.chars; //an array of all the divs that wrap each character

TweenLite.set("#test", {perspective:400});

tl.staggerFrom(chars, 0.8, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut}, 0.01, "+=0");

 

in my page there is

 

<div id="scroll-container" class="scroll-container">	
	<div id="test0" style="margin-top: 100px; margin-left: 100px;margin-bottom: 100px;">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac lorem lectus. Aliquam placerat dignissim augue. Donec eleifend nibh lorem, ac porttitor erat porta eget. Vestibulum tempor ultrices massa, at aliquam metus sodales consectetur. Aliquam a accumsan tellus. Donec ac sem vitae metus condimentum efficitur. Nulla volutpat cursus ante, id facilisis dui euismod et. Suspendisse hendrerit, ante ac accumsan fermentum, libero magna vestibulum augue, vitae vehicula nulla nisl nec neque. Quisque lectus nisl, aliquet id pulvinar eu, tristique id lacus. Mauris egestas ipsum vel elit sodales faucibus. Duis aliquet tempus ullamcorper. Sed vitae porta erat, et suscipit tellus.
	</div>
	<div id="test" style="margin-top: 100px; margin-left: 100px;">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac lorem lectus. Aliquam placerat dignissim augue. Donec eleifend nibh lorem, ac porttitor erat porta eget. Vestibulum tempor ultrices massa, at aliquam metus sodales consectetur. Aliquam a accumsan tellus. Donec ac sem vitae metus condimentum efficitur. Nulla volutpat cursus ante, id facilisis dui euismod et. Suspendisse hendrerit, ante ac accumsan fermentum, libero magna vestibulum augue, vitae vehicula nulla nisl nec neque. Quisque lectus nisl, aliquet id pulvinar eu, tristique id lacus. Mauris egestas ipsum vel elit sodales faucibus. Duis aliquet tempus ullamcorper. Sed vitae porta erat, et suscipit tellus.
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

 

Any ideas? Thank's

Paolo

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums. 

 

It looks like you aren’t loading SpilText.  

 

SplitText is a bonus plugin for Club GreenSock members. 

 

http://www.greensock.com/club

 

you can try SplitText and all bonus plugins for free on CodePen

 

https://greensock.com/try-plugins

 

Let us know if you need any more help

  • Like 3

Share this post


Link to post
Share on other sites

Hi, yes i load SplitText.js

 

 

 

Thank you for help

PAolo

Share this post


Link to post
Share on other sites

It looks like you're loading the ES module version of SplitText, directly in the browser (without declaring it as a module in the script tag). I'd recommend loading the regular ES5 SplitText file which is in your downloads, in the "minified/utils" folder. 

  • Like 2

Share this post


Link to post
Share on other sites

Thank's! It works!

 

I included the file in "bonus-files-for-npm-users" folder instead "minified/utils"

Share this post


Link to post
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.