Search the Community
Showing results for tags 'stacking'.
Found 2 results
-
Hi everyone! This is my first post on this forum, and I hope to explain myself better. I have a problem related to stacking cards, which I cannot create a Scrolltrigger for infinite cards. My goal is to create a list with only the last 3 cards visible, leaving the active card centered. Below I leave you an example of how my work should be: This is a similar work My code below will explain the situation better than me
-
Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.
