Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

7 Newbie

About NubieHere

  • Rank
    Advanced Member

Recent Profile Visitors

596 profile views
  1. Thanks for clearing that out Carl. Lesson learned: whenever GSAP 'misbehave', check your own CSS ; )
  2. 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.
  3. 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 …
  4. 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?
  5. 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 ...
  6. Thanks. I was suspicious of that ... and did exactly that just to be sure.
  7. 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.
  8. 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.
  9. 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
  10. Great, exactly. I'm still wrapping my head around using this thing properly ...
  11. 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.
  12. I don't know why I always end up in an extremely complicated setup when trying to do very simple stuff (stupid, maybe?) HOW, do I simply fade out all characters of a text (in any given element) one by one ... then, when done change text (not visibly) ... then fade in the new characters of the new text one by one. Fade in, fade out, fade in, fade out, wax on, wax off, wax on, wax off ... I'm doing stuff like this: ``` 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, stagger: 0.02, onComplete: changeText, onCompleteParams: [ { element, content } ] }, "+=0"); } function changeText ( params ) { // How do I start out with an invisible text that I can fade in? $( params.element ).html( params.content ); showText( params ); } function showText ( params ) { var myText = new SplitText( params.element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:1, stagger: 0.02 }, "+=0"); } ``` Which becomes overly complicated ...
  13. So, finally isolated the issue, and as expected. No problems. The only thing that's left now, is wasting a good chunk of life to hunt down bugs in poorly organized code … seriously don't know why I'm still in this business.
  14. As said, I'm about to completely isolate it. But being a Wordpress solution using SASS, it's a pretty nightmare to extract the relevant code.
  15. Yes, I was aware of that. And that was removed. But the problem persists. Unfortunately.