Jump to content
Search Community

splittext lines not working

eomerb test
Moderator Tag

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

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

  • Like 3
Link to comment
Share on other sites

@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

@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

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

 

  • Like 2
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.
×
×
  • Create New...