Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello All, I am very new to GreenSock plugins. I want to implement animations in my code as shown in the video in the starting. http://www.greensock.com/css3/ In the starting of the video, how the CSS plugin and CSS Special properties animates, I want the exact same effect to my labels. I searched for the plugin and code for that animation but I couldn't find it. Could you please let me know the code for that effect? Thank you! Thanks, Bunnie
  2. 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
  3. 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,
  4. 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
  5. 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
  6. 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'.
  7. 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
  8. 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?
  9. 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.z
  10. 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?
  11. 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.
  12. 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
  13. 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
  14. 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.
  15. 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
  16. 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!
  17. 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
  18. 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
  19. 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.
  20. 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 reall
  21. 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
  22. 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?
  23. 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
  24. 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.
  25. 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
×