Jump to content
Search Community

Create CodePen, a nightmare!?

NubieHere test
Moderator Tag

Recommended Posts

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

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.

 

image.png.25ef6bba5119d330a96802632a639b58.png

 

 

image.png.867b898960f824f7ea6a7358213cda65.png

 

You're missing a }.

 

Try this.

tl.from(chars, {duration: 1, autoAlpha: 0, stagger: 0.2}, "+=0");

 

  • Like 4
Link to comment
Share on other sites

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

CodePen can even analyze some problem in you HTML, CSS, or JS.

 

 

image.thumb.png.4b2f0351ea1a09b5c0be8f548e37e378.png

 

 

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");

 

  • Like 4
Link to comment
Share on other sites

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

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