NubieHere Posted December 4, 2019 Share Posted December 4, 2019 OK, someone please tell me why it turns in to a bleedin' nightmare creating a simple codepen for testing SplitText with an initially empty element? What is it that I'm CONSTANTLY missing about this library!? I've added these resources: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js See the Pen mdyyGeY by blaasvaer (@blaasvaer) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 4, 2019 Share Posted December 4, 2019 2 minutes ago, NubieHere said: What is it that I'm CONSTANTLY missing about this library!? CodePen or this library isn't the problem. If you check your console, it clearly shows your JavaScript is not valid. You're missing a }. Try this. tl.from(chars, {duration: 1, autoAlpha: 0, stagger: 0.2}, "+=0"); 4 Link to comment Share on other sites More sharing options...
NubieHere Posted December 4, 2019 Author Share Posted December 4, 2019 Great, didn't have the console open ... why would I on codepen ... would expect IT to tell me that I had an error (some kind of indication that my markup, styling or code was failing ... ). Guess I just had to learn that about codepen the hard way. Thanks. Link to comment Share on other sites More sharing options...
OSUblake Posted December 4, 2019 Share Posted December 4, 2019 CodePen can even analyze some problem in you HTML, CSS, or JS. And you can't animate to an opacity of 1, if the opacity is already 1. You would need to set the opacity to 0 in your CSS. And you don't use opacity and autoAlpha. Choose one or the other. autoAlpha sets visibility to hidden when 0. That's the only difference. tl.to(chars, {duration: 1, opacity:1, autoAlpha: 1, stagger: 0.2}, "+=0"); Do the from just like I showed above, or use a fromTo. tl.fromTo(chars, { autoAlpha: 0 }, {duration: 1, autoAlpha: 1, stagger: 0.2}, "+=0"); 4 Link to comment Share on other sites More sharing options...
NubieHere Posted December 4, 2019 Author Share Posted December 4, 2019 Yes, I know my tween wasn't correct ... I was just thrown off into the realm of getting this to work in the first place – one problem at a time you know. I've fixed that now, and it's working 'as expected' ... thanks again for pointing this stuff out. All I wanted was an isolated example of how SplitText would behave if I set the text of an empty element in code prior to tweening it. Would it flash briefly before hiding it and then fading it in ... I guess the result is: no, it perfectly hides it. Which is nice. Simple stuff like this often turn into to some hackish nightmare as the creator of a random lib might not take actual real world use into account. That seems not to be the case of this (and I guess GSAP in general). Which I LIKE, A LOT. Link to comment Share on other sites More sharing options...
OSUblake Posted December 4, 2019 Share Posted December 4, 2019 It will flash, but you're not seeing it because it's loading too fast. That's why I would recommend setting the opacity to 0 in your CSS. If there's network trouble, and it takes a second or two for gsap to load, your text will be visible during that time. 1 Link to comment Share on other sites More sharing options...
NubieHere Posted December 4, 2019 Author Share Posted December 4, 2019 Thanks. I was suspicious of that ... and did exactly that just to be sure. 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