[Issue with SplitText Module]

Hello Team, 
we are facing three issues with the SplitText  Module.
Issue 1: The DOM created by SplitText is not placed in the same position as the original DOM

The Original DOM:

 

The DOM created by SplitText:

 

Issue 2: The Word split is not happening based on Whitespace.
The words "IS ALL" in the first list items are split like ["I", "S",  "AL",  "L"] the expected output is ["IS", "ALL"]
 

Issue 3: The Word "There" in the first list items is not underlined in the final output.

Kindly note that Note: the user edits all the dom, so we cannot change the DOM structure.

 

CLICK  the click here button to start the animation
CLICK the reset button to reset the animation and back to its original position.

 

See the Pen eYbZEJa by dajeme7838- (@dajeme7838-) on CodePen

[SplitLineText in gsap is not splitting partial text color or partial style applied in the sentences]

@Cassie I understand the formatting is terrible. but it is made by the user dynamically.
is there a way that splitLine will split the word based on white spaces not by the tags
 

[SplitLineText in gsap is not splitting partial text color or partial style applied in the sentences]

YOUMANI<font>S(space)ALL</font>.
in this format the splitLine split the words line ["YOUMANI", s,All].
kindly update me

See the Pen XWoJELp?editors=1010 by dajeme7838- (@dajeme7838-) on CodePen

[addCallback function in gsap is not getting called if i seek after the callBack startTime in timelineMax]

Hope my question is clear,
Help me please

[Why does the splitted node from SplitText includes extra whiteSpace Note only the node which is next <br> Tag.]

@Rodrigo this does fix the issue. but in your solution, you are using &nbsp; only in the space after <br> tag.

 in my useCase the text content is dynamic I can't know what the user entered.

 check out this code-pen output. 

See the Pen qBQOaGa by dajeme7838- (@dajeme7838-) on CodePen

  if I use &nbsp; in all the spaces the splittext is unable to split the text by words instead it splits by line
 

[Why does the splitted node from SplitText includes extra whiteSpace Note only the node which is next <br> Tag.]

hello guys i'm stuck with this bug.
i'll explain the scenario.

I'm trying to perform word by word animation.

 

1. in the output I want that white space so I added white-space: pre-wrap property.
the output : with the space I expected.

 

2. but if alter the container using splitText it give some minor extra-space how to prevent. you can notice by the width difference.

 

3. if you uncomment the width you'll face overflow wrap issue due to that minor extra space.

See the Pen XWybLjZ by dajeme7838- (@dajeme7838-) on CodePen

[SplitText is not splitting the dom into words]

hi @mvaneijgen I expect the output to look like this.
there should be multiple space in my scenario that's why I use &nbsp;

[SplitText is not splitting the dom into words]

 why I'm not getting word-by-word animation? 
in this case, I want to split the word as present as in the dom so I used &nbsp;
but the splitText is not splitting the dom into words instead it splits into lines.
where am I going wrong kindly help me.

See the Pen BaqgPaV by dajeme7838- (@dajeme7838-) on CodePen

[In reactJs, I want to set timeline tween for dom element which will mount later somepoint.]

Basically i started a timeline tween, at that time i dont have the dom element mounted in the webpage is there any way to select dom element and animate in on the fly

[text-container-width-rendered-in-different-sizes-in-chrome-and-firefox]

I know this has nothing to deal with GSAP, just in curious i'm asking if any faced this issue and have a solution to it please share.
Text container width rendered in different sizes in Chrome and Firefox
 

Click here :- to check the issue in stackoverflow.

See the Pen by rwf3jga5 (@rwf3jga5) on CodePen

[Why does onStart callBack is triggered for the first element passed in array.]

Hello Team ,  Why does onStart callBack is triggered  for the first element passed in array.

tl.set([...chars], { opacity: 0 })
tl.to([...chars],{
  opacity: 1,
  ease: Linear.easeNone,
  willChange: "transform, opacity", immediateRender: false,
  onStart: placeHand,
  stagger:duration / chars.length,
  duration : (duration/chars.length)
});

in version 2 it gets called for every element that has been included in the array,

if  in v3 it triggers only for the first element then what will be the fix,
i want to call the onStart callback for every element in the array.

See the Pen abVmBzL by AniBhuvan (@AniBhuvan) on CodePen

[Problem because of clear props.]

1 minute ago, OSUblake said:

Also, is there any reason you are using .add instead of the timeline methods like this?

Yes actually i'm having  timeline as a root and tween methods in sub nodes and then pass the tween methods to the root ,
will it be a problem ? 

[Problem because of clear props.]

Hello team , i'm trying to achieve e 3d cube rotation using gsap v3 tween methods,
in this demo i'm  rotating  a cube by applying 3d css properties to the element.

t1.current =  gsap.timeline({paused : true});
t1.current.add(gsap.to(["#scene01","#scene02"],{
  						transformPerspective: 450 ,
  						transformStyle: "preserve-3d",
  						backfaceVisibility: "hidden",
  						transformOrigin: `50% 50% -${450 / 2}`,
  						duration:0.000001
					}),0)
    
 t1.current.add(gsap.to("#scene01",{ rotationY: -90,opacity :0.5, duration: 0.8 }),0);

 t1.current.add(gsap.fromTo("#scene02",{rotationY:90},{
   						rotationY: 0,
   						duration: 0.8,
   						onComplete: () => gsap.set("#scene02", {clearProps: "transformPerspective,transformOrigin"})
 					}),0);
 t1.current.play()

by the end of  "#scene02"  i clear the  transformPerspective,transformOrigin props using clearProps,
if i try to seek to the time 0.2  "#scene02" looses its 3d perspective and showing a 2d rotation,
clearing the props is crucial to business  logic. Anyway i'm clearing the 3d css properties for scene-2 only in the onComplete callBack, 
by the duration of 0.2 ,  scene02 should still has its 3d css properties right.
if not what is the solution for it.

See the Pen podymMV by AniBhuvan (@AniBhuvan) on CodePen

[Will GSAP Support the version 2.1.3 forever ?.]

Hello Team , I'm using Gsap version 2.1.3 for the past 3  years for a project ,I have developed some logics which works fine in the previous version,
recently i try to migrate it to version 3.9.1, most of my logics were breaking especially in MotionPathPlugin,  and some of them  were  breaking  even in tween methods ,
so i just wanna know will guys support the previous version, forever .

[RangeError: Invalid array length , MotionPath{ path_vars }]

// That's a very odd scenario , yeah you're right but for my project for many paths it has been plotted like this. in previous  version ,i haven’t got any issues and kindly fix this issues by next release.
Thank you for the quick  response 

[GSAP 3 - replacement for BezierPlugin.bezierThrough()?]

is there any changes in amount of curviness applied based on curviness parameter value in gsap version 3,
Because  i was used 1.25 as a curviness value in version 2, 

if i use the same the result is not same , now i'm using 0.5 in version 3.

[RangeError: Invalid array length , MotionPath{ path_vars }]

Sorry  team it's hard for me to create a demo in codePen,
but in local i get the error since those error  will only throw in development  environment ,
 

            let pathValArr = MotionPathPlugin.arrayToRawPath([{x:155.33,y:225.01},{x:155.33,y:225.01},{x:155.33,y:225.01}]);
            let pathValStr = MotionPathPlugin.rawPathToString(pathValArr)

 

but this is what the scenario is,  try passing three similar coordinates  to MotionPathPlugin.arrayToRawPath() method ,
 you will get that error.

[RangeError: Invalid array length , MotionPath{ path_vars }]

I'm migrating from gsap version 2 - version 3,

 

whenever i try to play timeline method i get this RangeError: invalid array length,

i suspects this error occurs  because of motionPath vars attributes in gsap.to(),

i pass array of co-ordinates to path key, when i pass type:'cubic' it works fine but i dont want the type to be 'cubic',
i'm looping through some keyFrames so someTIme the co-ordinates can be same,
eg:- 

[
    [
        {x: 28.4991, y: 0},
        {x: 28.4991, y: 0}
    ],
    [
        {x: 28.4991, y: 0},
        {x: 28.4991, y: 0}
    ],
    [
        {x: 28.4991, y: 0},
        {x: 28.4991, y: 0}
    ],
    [
        {x: 28.4991, y: 0},
        {x: 1074.759725, y: 0}
    ]
]

 

[GSAP 3 - replacement for BezierPlugin.bezierThrough()?]

thank you for the response .

//  NEXT release (which isn't released yet) :- is there  any  appropriate estimation  like when will the next version will be released .

[GSAP 3 - replacement for BezierPlugin.bezierThrough()?]

I'm getting that issue in my project to i'm using gsap version 3.9.1

[How to resolve sharp curves.]

@OSUblake now for some array of co-ordinate i get a sharp edged curves , how to resolve this? Instead  i need smooth  bending  curve.

See the Pen KKydogj by AniBhuvan (@AniBhuvan) on CodePen

[GSAP 3 - replacement for BezierPlugin.bezierThrough()?]

@OSUblake ThankYou man that was really helpful ,
now for some array of co-ordinate i get a sharp edged curves , how to resolve this? i need smooth  bending  curve.

[MotionPathPlugin dynamic path]

@ZachSaucier 

//  Are you just trying to get the raw path from the array of points? If so, you can use MotionPathPlugin.arrayToRawPath(),
Absolutely yes, but the method bezierThrough() in version-2 return a different format of values.
is there any possible way to get the similar values which is return in version 2 method using  MotionPathPlugin.

[GSAP 3 - replacement for BezierPlugin.bezierThrough()?]

well @OSUblake,
i'm trying to convert bezierThrough() to version 3 MotionPathPlugin.arrayToRawPath()

 the problem is that i have some sort of calculation with the values  which is return by bezierThrough() , but motionPathplugin.arraytoRayPath() version 3-

returns an array  which is not similar to previous version.
so i want to know how  the second control point value of the Cubic Bezier segment    has been calculated in version 2 in the keyValue called c.
or is there any possible to get the same values which is returned by bezierThrough() , in version 3.
thanks in advance man

[GSAP 3 - replacement for BezierPlugin.bezierThrough()?]

Hi Zach,
How the keyValue of c is determined from

the value return from BezierPlugin.bezierThrough(),