Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mustana

spilt text

Recommended Posts

Any idea how to use Gsap Spilt text in Animate CC

Link to comment
Share on other sites

SplitText works with regular DOM Elements (like <div>, for example) but if I remember correctly, Animate CC only uses <canvas> which is radically different, so that wouldn't work with SplitText. You'd need to figure out how to split things in the Animate CC environment.

Link to comment
Share on other sites

Don't cry over spilt text!

 

If you're using static text in Animate, you can  go modify - break apart, then Modify - Timeline - Distribute to layers. With each letter on its own layer, you can do timeline animation, under a motion guide  or whatever you need, with each letter being independent. 

Or, you could turn a string into an array of letters with javascript, then move them around with gsap, if you're more clever than I am right this morning. 

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

1. Create new document for example 300 x 250

2. Load SplitText.min.js
3. Write this code in Actions


text1 = document.createElement("txt1");
t1 = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eos eiusmod tempor incididunt ut qui labore et dolore ex magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat voluptas nulla.");
text1.appendChild(t1);
document.getElementById("dom_overlay_container").appendChild(text1);

text1.style.position = "absolute";
text1.style.top = "25px";
text1.style.left = "25px";
text1.style.width = "250px";
text1.style.height = "200px";
text1.style.font = "18px 'Arial'";
text1.style.color = "Black";

gsap.from(new SplitText("txt1").chars, {duration:0.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  perspective:400, ease:"back.out", stagger: 0.01});

Link to comment
Share on other sites

@Web Dizajner did you have a particular question? I read your post a few times and I'm not quite sure what you want, why you're creating a non-standard node, etc. If you need some help, please make sure to provide a minimal demo and we'd be happy to take a peek. 

Link to comment
Share on other sites

No I dont have question. I give solution to use Split Text in Animate CC.

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.
×