Search the Community
Showing results for tags 'css'.
Found 229 results
-
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.
-
TweenMax.set(obj,{backgroundImage:'url(path/to/img)', background:'black'}) This should result in the background being black with no image set. You're setting the background shorthand property second, which should overwrite any other background properties. jQuery does this correctly according to order. GSAP is merging them, setting a background image with a background color. Yes, this should be considered a common use case. Taking one object with script defaults and merging them with another object containing user settings can result in this type of scenario. I haven't done any testing, so I'm not sure what other CSS properties this behavior may be affecting.
-
Hello, I'm working on my new Portfolio at the moment, and i ran into a problem. The whole page will be based on a cube that spins around. At first I used CSS-Transitions for the animations, but I decided to switch to GSAP JS. It worked great but I got a "little" problem. It rotates the cude diffrently then it did before. This it what it does: http://vps.deesr.com/cube/ This it what it should do: http://vps.deesr.com/cube/cssversion/ *You can rotate the cube with the arrow keys | (WEBKIT only for now)* JS I use to rotate: //GSAP Version TweenLite.to(cube, 1, {rotationY: yAngle,rotationX: xAngle, ease:Quad.easeInOut}); //CSS Version document.getElementById('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"; Because of this "Bug" (its more like Property) the transparents get messed up in the GSAP version. It seems like the GSAP Version rotates the Axis NOT the cube itself. I hope someone is able to help me. Thanks - Deesr
-
I am working on developing some "star wars" type wipes for use as page transitions. i've got all 8 directions plus two circular ones going on so far. one circular one grows a small circle from the middle of the page to fill the whole page, masking on the new content. the other starts large and shrinks small to mask away the old content. the latter works in all browsers. but when i start small adn go big, it breaks in Chrome and Safari on the desktop only. yes, i am saying that it works fine on the mobile versions. here is a link to my project so far which is running a random transition from an array of 10 transitions: http://danehansen.com/temp/publik/wipes/ and here is a link to a special version i put up that is only the small to big circle that i am having problems with: http://danehansen.com/temp/gs/wipes/ i am not sure where this bug lies, but TweenLite is one of my suspects. i also suspect that this could be one of the odd situations where the browser is not visually updating. another couple of oddities i have noticed: i altered the code to only grow the circle mask to half its end diameter, then commented out the onComplete function... in Chrome the circle mask is a square during the tween, then ends as a circle when the tween is done. in Safari, the mask is a square during the tween also, but when it ends it turns into an odd part circle part rectangle shape, then if i drag the corner of the browser to change the size the mask corrects itself into a nice circle.
-
Besides convenience, it should be implied that if you have an element positioned 'left', and you desire to animate it's 'right' property, that 'left' should be unset. It doesn't make sense to animate a property that would yield no effect, and that you'd need to manually unset the conflicting property. Same with 'top' and 'bottom'.
-
I'm just getting started with gsap. I've created a simple script, but for some reason I can't get it to actually do anything. I'm getting zero results in both firefox and chrome on linux. What am I doing wrong? Here is the html source... <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <title>greensock test</title> <meta name="description" content="gsap test" /> <link rel="stylesheet" type="text/css" href="/css/test.css" /> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/js/TweenLite.min.js"></script> <script type="text/javascript" src="/js/gsap-test.js"></script> </head> <body id=""> <div id="outer-wrapper"> <header id="page-header"> </header> <!-- page-header ends --> <section id="main-content"> <h1>GSAP Animation Library Test</h1> <section id="testing"> <p>Lets see what he can do with Tweenlite</p> </section> </section> <!-- main-content ends --> <footer id="page-footer"> </footer> </div> <!-- outer-wrapper ends --> </body> </html> And here is my js: $(document).ready(function() { $("p").click(function (){ var $target = $(this) ; TweenLite.to( $target , 1, {backgroundColor:"#000"} ) ; console.log("clicked"); }) }); All the libraries load. Firebug returns no errors. When I click the <p> element, I get the console message, but nothing else.
-
I'm attempting to tween the line-height property of a div, containing multiple paragraphs. Using CSS best practices I'm using unitless values for line-height so that the value cascades. However when tweening values without units they are converted to pixels. I can probably hack around this, but I was wondering if it's possible to tell TweenLite not to do this conversion?
-
Hi, First - thanks so much for making this javascript framework! I've been trying to get an animation going in IE7/8 that I got to work on all other browsers using your framework, but it doesn't function properly in those browsers. You can see it in action here: http://neu14.com/transitions/print/index2.html I'm also attaching my files -> see index2.html (that one uses greensock). Thanks for any thoughts! Pol PS: I'm unclear if I need the CSS plugin for rotation or opacity or not since they both can be numeric? (I used it, but not sure if it was needed) animation.zip -
Hi, I am wondering if it's possible to tween children elements just by setting class name of a parent element. Just in case the question is not clear I have prepared a JSFiddle to illustrate the problem: http://jsfiddle.net/ESS4c/ The goal is to have paragraph text nicely animated between both states. Is that possible?
-
I am using TimelineMax for a project and I was wondering is there was a way to possibly update the CSS attribute of a Tween by calling it's label? For example my tween would look like: var tl = new TimelineMax({paused:true}); tl.to(element, time, {css:{top: -50px}}, "my-label"); I would like to possibly call this tween by it's label and update the CSS property to a new value. I tried something like this, but I had no success. tl.removeLabel("my-label"); tl.insert(TweenLite.to(element, time, {css:{top:-100px}}), "my-label"); Any help would be appreciated.
-
Hi, I have a grid of 6 boxes. I'm trying to get it so that when you click on a box it scales up and centres itself in the middle of the parent div. Here is what I have so far: http://codepen.io/hrk/pen/yJIBn I think I can get the current position of the box using .offset() I'm fairly new to JS and tweenMax - Can anyone point me in the right direction? Thanks Neil
-
Good afternoon! Trying to figure out how I can tween my "-webkit-mask-size" CSS Prop? it seems to invalidate my javascript when there are "-"s in the code.. Thanks
-
Recently I found a background color animation was failing in IE8, this was because I was reading the color to tween to from a hidden div and IE8 was returning the value as 'whitesmoke'. It's easy enough to use a lookup table as here: http://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes But might be nice if this was handled internally by the CSS plugin.
-
Hello, I'm new here. I'm redesigning my personal website and I wanted to make the current position of the social icons change to be part of the header once they are scrolled over. I wanted some type of animation timing effect that was triggered by the position on the page. This is my first time playing with Tween and Timeline, so I'm really a novice as to how things work. I've been playing with it, but all the extra effects will most likely be removed once I figure out exactly what it is I need and whether or not Tween can handle it. So here it is: http://marlonstevenson.com
-
Hi all, I'd like to know if its possible to use TweenMax/Lite with a predefined CSS rule, something like this: .someClass { left: 20px; top: 50px; } TweenLite.to( myDomElement, 0.5, { someClass }); In this way I could lay out a bunch of scenarios and animate to them as needed. Thanks!
-
Hi there, I'm having some trouble with css object. I want to move an image along a bezier curve. I create the image like this: img = new Image(); img.src = "car.png"; img.xpos=275; img.ypos=350; And then I try to move it along the bezier curve in canvas. In the function "loop" I draw the image continuesly. Here is the code for the bezier: ctx = document.getElementById("can").getContext("2d"); TweenLite.ticker.addEventListener("tick",loop); TweenMax.to(img, 4, {css:{bezier:{values:[{xpos:100, ypos:250}, {xpos:300, ypos:0}, {xpos:500, ypos:400}], autoRotate:true}}, ease:Power1.easeInOut}); But it does nothing. When I remove the css object and also autoRotate attribute it works. The working version of that line is here: TweenMax.to(img, 4, {bezier:{values:[{xpos:100, ypos:250}, {xpos:300, ypos:0}, {xpos:500, ypos:400}]}, ease:Power1.easeInOut}); I don't know how to fix it because if I try this with an <img> element it goes well also the first way. Could you somehow tell me where I made a mistake? I need to do this with an image created during process because I draw the images in canvas. Not just like this:<img src="car.png"> Thanks
-
Hi! I'm having a problem with a webpage. It contains 6 elements that are animated via css for :hover behaviours: .mySel{ -xx-transform: scale(0.8); } .mySel:hover{ -xx-transform: scale(1); } On intro, I need to tween these elements' y position individually, so I use TweenLite: TweenLite.to(this,1,{css:{y:50}}); Problem is, when my tween finishes, the tweened elements have inline styles overriding my :hover behaviour: -webkit-transform: matrix(0.8, 0, 0, 0.8, 0, 0); I see why jack did this but I'm open to manually resetting inline styles onComplete, but I have no way of using TweenLite to do so. I'll have to deal with vendor prefixes manually. I was wishing for TweenLite.to(this,0,{css:{scale:"" or scale:"none" or scale:"auto"}}) to reset the property but no dice... Can someone help me in any way? -
Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J
-
Hello, I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent. The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at: http://www.greensock.com/transitions/ http://www.greensock.com/css3/ and the "CssPlugin" section of your documentation at: http://api.greensock.com/js/ But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.") After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/ What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most. Thanks, for viewing & best wishes, J -
I have a button which inverts the colors on my website. It utilizes a plugin called rgb color - http://www.phpied.co...-in-javascript/ to get the color value of all dom elements, and invert them. I'm doing that with the code below: invertColors: function(){ var colorProperties = ['color', 'background-color']; //iterate through every element $('*').each(function() { var color = null; for (var prop in colorProperties) { prop = colorProperties[prop]; if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue color = new RGBColor($(this).css(prop)); //create RGBColor object if (color.ok) { //good to go, build RGB var element = $(this); $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')'); //subtract each color component from 255 } color = null; //some cleanup } //end each for prop in colorproperties }); //end each } //end invert colors What I'd like to do is rather than just flip the color, tween it. I'm curious to try the greensock tweening engine. So supposedly, I should be able to make a call something like this: TweenLite.to(element, 1, {css:{prop:'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')' }, ease:Power2.easeOut}); but this is not working (no errors are thrown), so I'm not sure what I'm doing wrong. Anyone have any ideas for how to get this working, or what the proper way to tween all of these color properties would be?
-
Hi everyone, I'm new to GSAP and am trying to duplicate a jQuery animation using Greensock. One of the effects is a constant scrolling background similar to http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html Using tweenMax I've come up with TweenMax.to($("#bg"),1,{css:{backgroundPosition:"+=1px 0"},repeat:-1}); However the background position resets every time the animation repeats. How can I continue the animation indefinitely without setting the time to something like 99999?
-
I'm having to develop a minisite which needs to be backwards compatible to IE7. I'm using jQuery and GS JS v12. I'm testing on browserstack.com -- a virtual IE7 running under a virtual Windows XP One of the errors I got is in CSSPlugin -- Invalid argument. I attach a picture at start of this message (click to see bigger). Two questions: 1) what might be going wrong? This code works fine in modern browsers. 2) is there a non-min version of the GS JS libraries to see things a little more clearly? obviously (1) depends on MY code, but I'm pretty sure there's nothing wrong with it as everything works with modern browser -- and it would be bloody hard to debug on this remote virtual machine, to see exactly which code of mine is being called — is there something with running v12 on IE7 that I should be aware of? I'm fine if it's not backwards-compatible, but just would like to know… Thanks
-
I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
-
As an erstwhile AS3 developer moving over to some JS, could someone clarify this for me? I was trying to move a div on screen and then (when invisible) set it back to where it started. Something like this (swapOut is a JQuery object): TweenMax.to(swapOut,0.4,{css:{x,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('x')]}); But I could never get it set back where I wanted? See the obvious error: I'm using 'x' instead of 'left'. When I inspected in Firebug I saw that my div's css had a transform-matrix set on it. When I went back and did this, all worked fine TweenMax.to(swapOut,0.4,{css:{left,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('left')]}); My question is: what's TweenMax doing for me with respect to x? Is this a proper CSS property? — or is TweenMax lending a helpful hand for us AS3 people and moving stuff in a tricky way when we (mistakenly) say 'x'? If so, what else is like this in the JS version? ("y" -> "top", etc?)
-
I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work. I'm trying to use the old 'make a UL inline for a horizontal menu' trick -- I ran through all of these options but couldn't get any to work 1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other. 2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline' The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful. Thanks!
