Jump to content
Search Community

crossfade background causes SVG text to fade

swampthang test
Moderator Tag

Go to solution Solved by swampthang,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I bet there's a good explanation for this and probably a much better way to accomplish a background crossfade but I'm seeing some strange behavior. 

 

In the codepen, I have an SVG with 2 foreignObjects each containing a div with a background image as a base64 image URL. Overlaying that is a group element with a text>tspan with some text in it.

 

I've got a simple autoAlpha tween on the top-most background div from 1 to 0 over 3 seconds and at the same time, the lower-most BG goes from 0 to 1. 

 

The crossfade is a little wonky but what's weird is the text is affected by the fade in Chrome. Firefox seems to handle it fine but I need it to work in Chrome. I can set either of the backgrounds to zero opacity and the text looks fine. 

 

I'm wondering if it has something to do with positioning because if I add any kind of position setting to the div's with the backgrounds I lose the text behind the background divs.

 

Any idea why this might be happening?

See the Pen GrrvWa by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

  • Solution

Ok, I think I figured out a better way to handle this since it's just a background crossfade that I'm after. 

 

See the Pen pRRMjj by swampthang (@swampthang) on CodePen

 

Transition (crossFade) works fine in WebKit but not so smoothly in Firefox. If anyone has an idea on how to fix that in FireFox please speak up. Personally, I'm not worried about FF for my needs.

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