Search the Community
Showing results for tags 'z-index'.
Found 17 results
-
I am try bring an SVG element to the front of the dom within the timeline. At the moment all the elements animate in the order of the html. Is there a way to bring elements to to the front? If you uncomment the the .fromTo tween in the middle of the timeline it will become clearer what my issue is. The white drawSVG path doesn't come to the front after setting the ZIndex. Thanks
-
What`s up, GSAP! I`ve briefly looked through docs to find any mention of the same issue, but seems like i need to ask it here. It looks like pin-spacer (wrapper of pinning element) doesn`t copy exact same CSS styles from pinning element. First of all I`m interested in z-index, as I`m developing complex sections` behaviour with revealing, pinning, swapping and covering sections. And missing of z-index in pin-spacer breaks some of my hacks. Currently, I`m using 3.6.0 you guys gave me a month ago to solve other issues. But it looks like previous versions doesn`t clone z-index as well.
-
Hi all, once again apologies for the lack of Codepen link, it keeps complaining that I am spam when I try to fork, even though I am not even logged in. Anyways, I have made a JSFiddle instead. I am hoping my issue is pretty simple, not even sure it is related to GSAP. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place. I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section
-
Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around
-
Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
-
Hey guys, I'm building some test shapes in 3d, and they're working great so far. I can add, insert new planes , keep them as svg and it's going great... BUT the ads we make here go into a tablet in a WebKit/Webview enviroment. When they do on IOS it looks perfect On Android No matter the size the planes shift Android 1 Android 2 Both different models, and massive screen size differences I tried to figure out how to prevent this from happening, all my values are based off start values which are x y z values so i'm not using hard numbers i dont think... I tried to debug it as bes
-
I've noticed a strange behaviour when using autoAlpha on elements that have a z-index set. Is there any way to stop the fading in from interfering with the z-index? See CodePen http://codepen.io/friendlygiraffe/pen/EyYNbz
-
what can i use instead of transform-style in IE?
-
I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space. Is this possible?
-
I've got an overlay that I have moved to the back of my page, so that it doesn't block my hover animation on the 2 circles. #open { visibility: hidden; z-index: 1; } When I open the overlay, I need it moved to the top, so that it will cover the circles, and also block their animation. My set doesn't seem to have any effect though. tl2.set('#open', {zIndex:5}) .to("#closed", 1, {morphSVG:{shape:"#open"}}) I've tried moving the set around the tl as well. It doesn't seem to work no matter where in the timeline I put it. I figure I probably want it at the beginning though, so that t
-
Hello, I'm running into an issue with z-index when animating a container that has a button in it. See codepen: I want to animate the #containerDiv. Inside is a #buttonDiv with a z-index of 2000 so it's at the very top. Problem: As soon as the parent div gets animated (by clicking the #buttonDiv) the z-index changes and the #blueBox gets moved to the top. How can I keep the button at the top without changing the order of the divs in the HTML? I know when a div has no z-index when animated, it automatically gets "0". So in this case it will move the #containerDiv (incl. the butt
-
I started playing with edge animate last week and was using jquery-ui for my drag and drop. I then learned that there was a known bug that made it act like crap in responsive layouts. A coworker to me about greensock so I tried it out and it works good. The only issue I have run into is it seems to effect it's z-index. I have the create statement on creation complete w/ it set to disable. I also have 2 buttons that when pressed enable/disable the draggable. The dragged object becomes the top div and can cover the buttons used to toggle it. Looking online I found people trying to force
-
I've got a gallery of items. When dragged, the box's z-index appears to be higher than elements created before, but lower than ones created after. I want the z-index (for the dragged item) to be higher than all other items, not just the ones created before in the DOM. ie box 1 should move on top of boxes 2 - 5, not under them. I've tried ZIndexBoost. Edit: I've also tried applying style.zIndex="" on click, but it's not working.
-
Hello there, As a beginner I'm i went into an issue early and I'm still unable to solve it. Maybe can you help me with it. I'm trying to achieve a card flip effect with my navigation bar, here's a small example of what I try to achieve but I'm unable to make this working. It seems to be a z-index related issue. I really hope you can help me achieving this effect. Kind regards. EDIT /// I tried at one point to achieve this effect with 2 menu div with all my buttons one over the second and it was working fine, but I needed to animate both object directly at the same time, whi
-
Hi, trying to get this z-sorting to work proper. What i want to achieve is some kind of looping/carousel. When a ".area" is getting clicked it should be placed at the very bottom z-wize. And when all elements have been set to bottom they should start to be placed up again. Really like an carousel but z-wise. Any ideas? fiddle: http://jsfiddle.net/EjpSu/8/
-
Alright, I have problems with interactivity. In an attempt to rectify that I am trying out draggable. I have been unable to find a starting from scratch tutorial so, I just read a lot of notes on it and got it to kind of work. I think there might be a problem with my layout, but since I just kind of jumped in I am not sure how to set up my markup to work with this. A brief description of my project; I am building interactive maps. They have multiple floors meaning multiple layers. The navigation has to stay put, but I want to be able to zoom in and drag the map around to scroll it. It has
-
I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -web
