eomerb Posted January 3, 2020 Share Posted January 3, 2020 helllo there, I am working on split text animation but dont have text in divs they come from an array and I create divs for them and split and animate everything works fine but splitting lines are not working. div moving all together I console.log splitted lines and only got I div I dont know what I am doing wrong.I put a part of my code(instead of all the text I put 1 text) to codePen. dont know why but it works there. but sometimes it works like my local enviroment div moving all together See the Pen WNbXZEv by eomerb (@eomerb) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 3, 2020 Share Posted January 3, 2020 Hi @eomerb It's tough to say without seeing your local env (and I couldn't get the codepen to misbehave), but my hunch is that SplitText is running before the element is fully rendered the dom, so it isn't able get the proper measurements to split it into lines. 1 Link to comment Share on other sites More sharing options...
eomerb Posted January 3, 2020 Author Share Posted January 3, 2020 hello @elegantseagulls the interesting is I have no problem with breaking to words or chars I am waiting for creating all the divs and then use splitText can it be about css? maybe SplitText thinks its one line due to default css settings Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 3, 2020 Share Posted January 3, 2020 Hi @eomerb, With words/chars, SplitText doesn't need to measure anything, it's just looking at the text for characters and spaces and splitting it based on that, but for lines the element needs to be completely rendered to the dom, so that SplitText can measure the width of each line. Have you tried targeting the class or id you're generating instead of the var you're creating in JS: const split = new SplitText('.animatingDiv',{type:"lines"})? That may help. 1 Link to comment Share on other sites More sharing options...
eomerb Posted January 3, 2020 Author Share Posted January 3, 2020 @elegantseagulls even if that helps it cant help my project I am reading all the data from json file. it also has a part where animation options has it in. everything is dynamically working if I know splitting lines is using I dont know which div cant hard coded that Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 3, 2020 Share Posted January 3, 2020 13 minutes ago, eomerb said: even if that helps it cant help my project I am reading all the data from json file. it also has a part where animation options has it in. everything is dynamically working if I know splitting lines is using I dont know which div cant hard coded that Why can't you know that? You'll be appending the content to the page at some point. You can wait to run the SplitText code until after it's appended. Then it can know exactly how it's rendered on the page (which is what it requires to know where it has line breaks). Link to comment Share on other sites More sharing options...
eomerb Posted January 3, 2020 Author Share Posted January 3, 2020 @ZachSaucier I did what @elegantseagulls said but instead of class name I used id let split = new SplitText('#div_0',{type:"lines"} but it still moves as one ) Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 3, 2020 Share Posted January 3, 2020 Sorry, but without being able to reproduce the error for us it's going to be near impossible for us to help you. You could upload what you have to a server and have us take a look there. Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 3, 2020 Share Posted January 3, 2020 @eomerb With my suggestion, if you're loading the text in with json, you'll still need to make sure the content is rendered to the dom (I'm not sure sure what tech stack you're using to manage the json requests, but you may find this useful:https://www.sitepoint.com/guide-vanilla-ajax-without-jquery/ ). A quick test to check if the error is due to wrapping the text before it's completely rendered to the dom is to add a timeout function to the SplitText function to see if that fixes it. 3 Link to comment Share on other sites More sharing options...
eomerb Posted January 6, 2020 Author Share Posted January 6, 2020 @elegantseagulls hello again, I am loading the JSON file like this: $.getJSON("configuration.json", function (result) { myClass.setData(result); }) and I have a custom event method that I trigger when the result is processed. I create my divs and when all divs appended to body I trigger to html drom myClass that splitting is ready I am a beginner in DOM elements but which I dont understand is splitting chars and words is fine only lines are a problem. Link to comment Share on other sites More sharing options...
eomerb Posted January 6, 2020 Author Share Posted January 6, 2020 @elegantmouse, @ZachSaucier I may be close to my problem I changed my codePen when I create divs I set them to .style.display = "none" and on timeline start changed it back to block and onComplete to none again because I want Only animating div to be shown on screen. I don think it will be a problem but when I was trying some other thing I set them to block at creating and realize the div supposed to split to the lines is done can my problem be this ? Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 6, 2020 Share Posted January 6, 2020 @eomerb I'm not super familiar with jQuery, but for the json handling I believe you should be able to run your SplitText on jqXHR.done(); With that,display: none; wont work, (unless you change it to block before creating your SplitText) as display none won't allow the browser to measure the width, as there isn't one with display none. SplitText will run before your Timeline start, so you'll want to change to display block just before creating your SplitText. 2 Link to comment Share on other sites More sharing options...
eomerb Posted January 6, 2020 Author Share Posted January 6, 2020 @elegantseagulls I figured that out now I am changing display to block before splitting to lines and then changing back to none problem solved thanks for the assists 2 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