splitText visibility, opacity, autoAlph

[Winslow]

Trying to get an additional splitText animation in and somewhat confused on what the defaults are and also what the correct  process is for visibility, opacity, and autoAlph. I have read most off what I could about this but still unclear. My current situation seems to have mixed attributes in the Chars div. The first char is absolute, hidden, opacity:0. The remaining are inherit but various ranges of opacity from 0 to .8 and I am not even using opacity. Also is absolute the default position? Of course it's late, I've been at it way too long, and I just can't seem to quit tinkering with my animations. Everytime I read more the more I want to do. Oh well, if and when I (we) are quarantined I'll have plenty to do.

 

Regards

 

Added Codepen and like stated, my troubles went away.

 

What I am trying to do is add an animation at the end of another, to make it look like taking a breath, expanding and deflating. What I have now is just the expanding portion but it would not be difficult to reverse it. How would I make the letters on either side expand less than the middle ones? I am using splitText because the other animation uses it and it's available and not opposed to using something else. I might be able to change the tween amounts to variables based on position and use the char array to tween each char??? Thoughts?

See the Pen zYGaeOx by B0nef1sh (@B0nef1sh) on CodePen

Edited March 20, 2020 by B0nef!sh
added codepen +

[ZachSaucier]

Hey B0nef!ish and welcome to the GreenSock forums! It's really hard to know what's going on blindly. Can you please create a minimal demo of the issue in a CodePen or something? The thread below provides more information on how to do so:

 

[Winslow]

ok, now that this is done (simplifying in codepen corrected my issue as mentioned in the doc) and many iterations later... I have the text scaling up, fontSize, height  and even  (super) text shadowing (not in this code pen).  The question now is "best way to add 3D perspective" to this. I came up with a formula to apply Y rotation to each char proportionally so that less scale occurs in the middle and more on the ends. How do I incorporate chars{i} processing so I can compute a factor to use for scaling in the standard gsap.to processing .   gsap.to(split.chars, {scaleY: (factor * 5deg)}  where factor = (centerIndex-i). I have 13 or so characters in the title.  I might even use proportionality for the scaling. Will a (for) loop  produce the same as gsap.to(array)? I'll play with it for a while and see. If there is a better way I'd appreciate some insight. 

 

Regards

[ZachSaucier]

On 3/22/2020 at 2:51 AM, B0nef!sh said:

How do I incorporate chars{i} processing so I can compute a factor to use for scaling in the standard gsap.to processing .   gsap.to(split.chars, {scaleY: (factor * 5deg)}  where factor = (centerIndex-i)

You can use functions as the value, no problem:

gsap.to(split.chars, {scaleY: i => {
  return (centerIndex - i) * 5;
}});

Also note that no scaleZ property exists on DOM elements.

[Winslow]

Hey thanks, I appreciate it!!! Nice and concise!