Mustana Posted August 11, 2021 Share Posted August 11, 2021 Any idea how to use Gsap Spilt text in Animate CC Link to comment Share on other sites More sharing options...
GreenSock Posted August 11, 2021 Share Posted August 11, 2021 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 More sharing options...
geedix Posted August 16, 2021 Share Posted August 16, 2021 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. 3 Link to comment Share on other sites More sharing options...
Web Dizajner Posted September 12, 2021 Share Posted September 12, 2021 1. Create new document for example 300 x 250 2. Load SplitText.min.js 3. Write this code in Actionstext1 = 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 More sharing options...
GreenSock Posted September 13, 2021 Share Posted September 13, 2021 @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 More sharing options...
Web Dizajner Posted September 13, 2021 Share Posted September 13, 2021 No I dont have question. I give solution to use Split Text in Animate CC. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now