Search the Community

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. I think I could develop a workaround for my specific problem, but I wonder: Why z-index and some other styles are not translating to pin-spacer? While writing this, I`ve solved my issue by setting position: relative (position wasn`t set before) for all my pinning elements. While z-index is still not translated to pin-spacer, it`s layering looks OK. MB It`s some of html/css essentials but nested (in pin-spacer) element`s z-index somehow counts different dependent at various css position values. OFC, If you request I would add some codepen to better illustrate what is written, but it`s no more an issue.

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, instead of behind it. Ideally, you should not be able to see any of this image within section 2. I have tried giving some z-indexes, but this does not seem to make a difference. Is there any way to stop the animated image from sitting on top of section 2? Thanks

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 this?

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 best i could and android just doesn't play ball. It wont return offsetWidth, device width returns random numbers which aren't realistic to the stage, device width returns 0, viewport width returns 0... But i dont know if any of them are the reason why this is happening. From what I see the top and bottom planes are perfect, but the side planes are all shifting.. Do you have any idea why? Also off topic but again the codepen made my box different and skewed it.. looks skewed. When it looks like what the above ios screenshot looked like on my desktop(and thats the way it should). But yeah I'm mainly really concerned about those gaps. Any tips? Thanks!

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 the morphSVG animation covers up the circles immediately.

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 button) back, behind the blue box. I just wonder if there is any way to avoid this and keep the original order. Any help would be great!

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 it to the top but no one trying to make it stay put. is this a known issue? Sorry if this is a dumb question, I am teaching myself 2 new softwares. this is how I am calling it: function init(){ var Protractor = Draggable.create(document.getElementById("Stage_MilProtractor")); Protractor[0].disable(); sym.$("move").click(function(){ Protractor[0].enable(); }); sym.$("write").click(function(){ Protractor[0].disable(); }); }

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, which caused a lot of complicated handling of the animation.

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 to remain in my #canvas and get clipped if it exceeds those bounds. My problems; after I zoom in it drags to show the hidden portions of the map, but then snaps back to center. After I drag the map, it changes the z-index of the draggable #images to 1001, and every drag after increases that number by 1. My markup: #canvas { position: absolute; background-color: black; width: 1080px; height: 1080px; overflow: hidden; } .mapLayer { width: 1080px; height: 1080px; position: absolute; overflow: hidden; } #images { overflow: hidden; position: absolute; top: 0px; left: 0px; width: 1080px; height: 1080px; z-index: 0; } #key { position: absolute; } #legend { position: absolute; top: 170px; left: 33px; } #buttons { position: absolute; top: 830px; left: 24px; width: 300px; z-index: 5; } .btn { position: relative; margin-top: -4px; } #chooseview { position: absolute; top: 800px; left: 24px; } #zoom { position: absolute; top: 40px; left: 40px; display: block; width: 50px; z-index: 5; } .zoom { width: 50px; height: 50px; } My code: window.onload = function() { var images = document.getElementById('images') var canvas = document.getElementById('canvas') var btn01 = document.getElementById('btn01'); var btn02 = document.getElementById('btn02'); var btn03 = document.getElementById('btn03'); var btn04 = document.getElementById('btn04'); var zin = document.getElementById('zin'); var zout = document.getElementById('zout'); var you = document.getElementById('you'); var fl01 = document.getElementById('fl01'); var fl02 = document.getElementById('fl02'); var fl03 = document.getElementById('fl03'); var fl04 = document.getElementById('fl04'); var st01 = document.getElementById('st01'); var st02 = document.getElementById('st02'); var animateFl01 = new revealFl01(); var animateFl02 = new revealFl02(); var animateFl03 = new revealFl03(); var animateFl04 = new revealFl04(); var animateZin = new ZoomIn(); var animateZout = new ZoomOut(); //: This is to hide layers on start. TweenLite.to(you, 0, {opacity:1}); TweenLite.to(fl01, 0, {opacity:1}); TweenLite.to(fl02, 0, {opacity:1}); TweenLite.to(st01, 0, {opacity:1}); TweenLite.to(fl03, 0, {opacity:0}); TweenLite.to(fl04, 0, {opacity:0}); TweenLite.to(st02, 0, {opacity:0}); //: These are button functions to show and hide layers. function revealFl01() { this.tweenCount = 0; this.animate_Fl01 = function(){ TweenLite.to(you, 0.25, {opacity:1}); TweenLite.to(fl01, 0.25, {opacity:1}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl01(event){ animateFl01.animate_Fl01(); } function revealFl02() { this.tweenCount = 0; this.animate_Fl02 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl02(event){ animateFl02.animate_Fl02(); } function revealFl03() { this.tweenCount = 0; this.animate_Fl03 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:1}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl03(event){ animateFl03.animate_Fl03(); } function revealFl04() { this.tweenCount = 0; this.animate_Fl04 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl04(event){ animateFl04.animate_Fl04(); } function ZoomIn() { this.tweenCount = 0; this.animate_Zin = function(){ TweenLite.to(you, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl02, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl03, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl04, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st02, 0.25, {height:2000, width:2000, left:-540, top:-540}); this.tweenCount++; }; } function animate_Zin(event){ animateZin.animate_Zin(); } function ZoomOut() { this.tweenCount = 0; this.animate_Zout = function(){ TweenLite.to(you, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl02, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl03, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl04, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st02, 0.25, {height:1080, width:1080, left:0, top:0}); this.tweenCount++; }; } function animate_Zout(event){ animateZout.animate_Zout(); } btn01.onclick = animate_Fl01; btn02.onclick = animate_Fl02; btn03.onclick = animate_Fl03; btn04.onclick = animate_Fl04; zin.onclick = animate_Zin; zout.onclick = animate_Zout; Draggable.create(images, {type:"scroll", edgeResistance:0.85, bounds:(canvas)}); }; Unfortunately my images are proprietary so I can't put up a working version yet. If anyone has seen a tutorial about this, has ideas on how to scroll the clipped off part, or if anyone knows where I screwed this up please let me know.

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; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.