Jump to content
Search Community

Fadein image just wacks on?

NubieHere test
Moderator Tag

Recommended Posts

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

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

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?

Screen Shot 2019-12-11 at 15.38.23.png

Link to comment
Share on other sites

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

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