Search the Community
Showing results for tags 'crossfade'.
Found 4 results
Infinitely repeat fading sequence of imagesHi, I'm having trouble getting the animation to repeat smoothly thanks.
Hi! I'm working in a page that should have a crossfade effect when trasitioning from one section to the next, while also have some animations on each section when they are pinnned. I understand that the usual way of setting up such a page is to use position: absolute; to overlay each section and then just control the visibility of each through alpha/opacity using the ScrollTrigger plugin. Unfortunately this would be fairly complicated to set up in this page and as such a last case resort. Is there any way to achieve such and effect without relying on absolute positioning? At first I thought I might be able to pin an element, play all animations of the section, and then "re-pin" it with pinSpacing: false, let the next section come under the current pin (possibly manipulating the z-index of each section through .set( )), and then do the fade. No luck so far though. If I could have both the padding of pinSpacing: true and after that the overlay effect of pinSpacing: false, I could probably figure out the rest. The anexed codepen just give you an idea of the document structure and will likely serve as a base for further discussion.
Crossfade text inside pinned sectionHello everyone, first of all I would like to thank you. Your tools are by far the best I could ever use. The investment in the membership has already paid off 10x. I have a conceptual question and I have tried many ways to get it to work correctly but I realize I am barking up the wrong tree. I have a section that has 100vh height and is pinned. It starts "top top" and ends "+=400%". Inside this section I have 4 text layers. These are also 100vh height and 100vw width and absolutely top/left set to 0. All text layers have an opacity of 0. Everything starts with a blank red section and some firework animation. When reaching 50% (out of 400%) I want to have text layer 1 from opacity 0 reaching opacity 1. Starting from 50% to 100%, I want to begin hiding layer 1 and fade in layer 2. When 100% is reached, I want text layer 1 to be opacity 0 and text layer 2 to be opacity 1. I want the same to continue in increments of 50. So when 150% (out of 400%) is reached, text layer 2 should change from opacity 1 to 0 and likewise at the same time text layer 3 should change from opacity 0 to 1. Somehow I didn't quite understand how to do this with the timelines. The basic animation works, but unfortunately I can't manage to hide the back layer. The whole thing has to work in two directions, of course. The elements should fade at the same time (with scrub: true). In my current attempts, I get the layers to fade in one after the other using a timeline, but I don't get the back layer to fade out. What is the correct way to do this? Maybe there is an example around I've missed. Thanks! Regards Hirbod
crossfade background causes SVG text to fade
swampthang posted a topic in GSAPI 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?