NubieHere Posted December 11, 2019 Share Posted December 11, 2019 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 ... Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 11, 2019 Share Posted December 11, 2019 2 hours ago, NubieHere said: 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. Is the new image pre-loaded? My guess is that you're not giving it adequate time to load so it "glitches" when it appears once it's done loading. Completely unrelated to GSAP. 2 hours ago, NubieHere said: why can't I by the way use gsap 3.0 in codepen!? gsap is undefined ... That's got to be user error Fork the GSAP 3 starter pen in this thread to get you started: Link to comment Share on other sites More sharing options...
NubieHere Posted December 11, 2019 Author Share Posted December 11, 2019 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? Link to comment Share on other sites More sharing options...
NubieHere Posted December 11, 2019 Author Share Posted December 11, 2019 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 … Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 11, 2019 Share Posted December 11, 2019 38 minutes ago, NubieHere said: that's not gsap 3.0 if I'm not mistaken Correct, CDNJS took a while to update their versions and CodePen has to now update the version that they're hosting using from CDNJS. Maybe we can ask them to manually force the update - it's possible that it wouldn't do it automatically even if they have an automatic process because of the version number change, I'm not sure. We'll ask them about it. 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