NubieHere

I also think part of the issue is, that I'd like to use the initial position of the letters, so I don't have to fiddle around with specific x and y values in code to place things (therefore prefer to use .from) ... what when the client comes and changes the word? It'll become an unmanagable nightmare ... I want to simply be able to swap the word. And then ('cause I can't avoid it otherwise) add chars[n] to the timeline for control. Yes, still potentially a lot of manual work, but better than none.

Yeah, but would still be nice to see the answer to the question: How to identify individual characters ... I need way more control over each letter in many cases that gsap algorithms wouldn't be able to provide due to specifics ; )

OK, I think I have to elaborate on this to understand what's going on. I have a string of characters ABCDE. I want A and B to come in from the left of the screen and D and E to come in from the right – the C stays where it is – in the middle. Now, I'm trying to 'group' the letters on the LEFT of C to manage them in a separate timeline ... and the letters DE on their own timeline ... for the same amount of control. I've updated the CodePen to illustrate what I'm trying to achieve ... hope it comes across as intended. I'm facing a range of issues; HOW to group things, and what TYPE (.to or .from) to use, and what VALUES to insert in the property ... yeah, that's a lot to not get when trying to use a library ; )

Thanks a lot ... I'll see if I can hack something together ...

Thanks, but that seems overly complicated to calculate each individual letters position relative to a responsive layout (yeah, have to work in responsive mode as well) ... I'm also trying to use SplitText plugin, but are having issues targetting the individual letters. I have managed to wrap all letters i span's with matching classes. But now I can't figure out how to target them individually using a timeline ... how can I access a letter by class like this: tl.from(splitText.chars['.m'], { duration: 1, x: 1300}); // .m representing the class of an individual letter.

How would I animate an element in from offscreen (just outside the left and right side of the browser) and into it's initial position? It has a position center screen initially ... and need to have in relation to other elements. I'm thinking; Oh, how do I get the right viewport position and add the width of the element to push it offscreen for that amount. But that seems kind of like rocket science ... I guess there has to be a simpler way?

Thanks a lot ... I'll definitely check it out.

OK, I'm an idiot ... staggerFrom is not on the SplitText, but on the TweenLite ... sigh, getting a very strong coffee ... ; )

I can't seem to figure out from the docs or by googling, what the syntax for using staggerFrom with SplitText (following the introduction video of SplitText). I do embed gsap.min.js and SplitText.js in my document. But this: let splitText = new SplitText('.ensomhed', {'type': 'words,chars'}); splitText.staggerFrom(splitText.chars, .8, {opacity: 0}); throws this error (as if gsap was not loaded – which is NOT the case): Uncaught TypeError: (new SplitText(...)).staggerFrom is not a function Someone know what I'm missing?

Unfortunately not. It was the simple fact that I hadn’t wrapped the string for the background-image property in url() ... the code was part of a way to complex example to simply pull out. I’ll see if I can find the time to recreate a snippet just to see if that’s redoable. Thanks.

OK, wild guessing here made me find the answer ... I had a backgroud-image set directly with an url. BUT I left out the url() wrapper on the string ... and then I guess gsap somehow renders it invalid (or whatever) and removes it. Que?

Hi, I see that gsap overrides the already applied styles set on the element through markup ( '<div style="yadda yadda"' ... gets overridden ) ... how do I avoid that, and simply have gsap add the properties it needs to work? I set a background-image on the element using the style attribute ... and when doing a gsap.to() ... it removes the background-image element from the style ... that's NOT what I would expect.

OK, the problem seemed to be that I didn't know you could pass in a jQuery object as the target ... fixed the issue.

I need to somehow reset a timeline and reapply it in a safe and robust way. As you can see in the codepen the close button (the black circle with a white cross in the upper right corner when clicking one of the colored boxes) the cross rotates just fine the first time, and then – depending on when you click to close it – it starts to get weird. Next time you click a colored box, the cross start off from the same position when you clicked to close it. Somehow makes sense I guess as the rotation is somehow at that point in time. But it also doesn't fire at all at random ... so, how can I make SURE that the NEXT time I apply a timeline to ANYTHING, ALL PREVIOUS 'stuff' is eliminated COMPLETELY, so that I can reassign stuff without getting kicked in the nuts?

Thanks for clearing that out Carl. Lesson learned: whenever GSAP 'misbehave', check your own CSS ; )

Hi, Why is this (see codepen) first animating the element to the top and the left, and THEN animating the width and height!? I would EXPECT it to animate ALL properties at the same time ... as I guess any user would. So, WHY is it behaving as it does, and what would be the argument that it indeed should behave like this? It seems counter intuitive ... at best.

But adding the 'false' now breaks preload progress ... so all in all this preload.js is a big pile of pooh. You fixed one problem only to have created another one ... it seems endless …

Yeah, you were right. It turned out to be: new createjs.LoadQueue( false ) missing the 'false' ... Even though I did try both true and false, and even the default (none). And when I type 'gsap' into the javascript resource in codepen ... i get this (see image) ... and that's not gsap 3.0 if I'm not mistaken?

No, I cannot provide a codepen, as the code is overly complex. But basically I have the issue of when using gsap to fade in an initially opacity 0 element with a background-image set the image just wacks on somewhere randomly in the transition. BUT when I use css transition: all 1s ease-in ... it works fine. Now, does anyone have ANY experience with (some buggy browser catch) using fade in and fade out of elements with background-image set while the image is faded out (opacity: 0) and then fading in? Basically what I do is: fade OUT an element with a background-image set, then CHANGE the background-image while opacity is 0, and then FADE IN the element. Now while the element itself seems to fade in just fine, the (background-)image seems to ignore the opacity-level (randomly) and just immediately pops in ... This seems to be a fairly straight forward (yeah, right) task to create, but weird random stuff is happening. And why can't I by the way use gsap 3.0 in codepen!? gsap is undefined ...

Thanks. I was suspicious of that ... and did exactly that just to be sure.

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.

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.

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

Great, exactly. I'm still wrapping my head around using this thing properly ...

Yes, and as always: only when I post here I find the answer. I'm going to write a paper on the phenomenon of asking a question and then immediately find the answer. function swapText ( element, content ) { var myText = new SplitText( element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:0, autoAlpha: 1, stagger: 0.02, onComplete: showText, onCompleteParams: [ { element, content } ] }, "+=0"); } function showText ( params ) { $( params.element ).html( params.content ); var myText = new SplitText( params.element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.from(chars, {duration: 0.1, opacity:0, stagger: 0.02 }, "+=0"); } Sigh! Still not very elegant, though.