[scramble text multiline problem]

@ZachSaucier 

 

giving multiple characters is working great.

instead of "lowercase" and "uppercase" I can write the whole alphabet and cover that cases too

many thanks

[scramble text multiline problem]

hello there,

I want to use scramble text animation but  doesnt look good with multilines

as in codepen example in multilines scrambling  jumps to next line and the words appears like as if comes from opacity 0

is there any way to solve it

 

thanks

See the Pen JjopaVY by eomerb (@eomerb) on CodePen

[splittext lines not working]

@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

[splittext lines not working]

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

[splittext lines not working]

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

 

[splittext lines not working]

@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

)

[splittext lines not working]

@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

[splittext lines not working]

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  

[splittext lines not working]

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

[how to get end of each animation]

@Shaun Gorneau

 

I used onComplete in each but I got nothing probably because of wrong use of syntax

works great now  

thanks a lot.

[how to get end of each animation]

hello there,

I am working on a timeline which has several animations

like

let objArr = [] 

let objArr2=[]

let tl = gsap.timeline()

tl.staggerFrom(objArr,1,{

    opacity:0

})

tl.staggerFrom(objArr2,1,{

  rotation:180

},0.5)

tl.staggerFrom(objArr,1,{

   y:-10

})

I want to trigger one or different methods each these 3 completed

onComplete method on tl triggers only when these 3 are done

please help 

thanks

[staggerTo different values]

hello there,

I am working on a stagger which scales down to 1 from 1+(0.1*index of array)

I am tryin to reverse it but I cannot use .reverse() because I am changing some values in other tweens I have to create a new timelinemax and do the reverses one by one.

the scale is 1 and I needed to increase to 1+(0.1*index of array)

how can I write different values to scale

I can create another timeline and reverse this one but it will be better if I can write to different values.

thanks