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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hey there, is it possible to tween both shadow Inset and the outside shadow at the same time??
  2. Hi guys, Just trying to achieve the CSS animation transforms with GSAP. I am getting different results while using same properties. How can I achieve results like in CSS animation? I am doing something wrong? Here is the code: http://codepen.io/praneybehl/pen/Gbmhs Thank you for the help. Praney
  3. Hi everyone this is my problem, i making a little practice and i want rotate a image but i don´t want use CSS only script var img; function init(){ ctx = document.getElementById("canvas").getContext("2d"); img = new Image(); img.src = "http://postimg.org/image/qj0abntbh/"; img.xpos = 50; img.ypos = 10; img.onload = function() { TweenLite.ticker.addEventListener("tick", loop); } function loop(){ ctx.clearRect(0, 0, 800, 600) ctx.drawImage(img, img.xpos, img.ypos); } TweenMax.to(img, 7, { rotation: 360, delay:2.2, repeat: 5}); } thanks
  4. Im pretty new to tweenmax, and i was wondering how to create an mouseover effect like seen on this page (hover over the images) : http://www.fcinq.com/ (scroll down to the work) They are using this in the css: transform: scale(0.25, 0.1); transition: background 0.3s linear 0s, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s; and on the hover: transform: scale(0.7); transition-delay: 0.2s; However, I have no idea how to do this in TweenMax?
  5. I'm happy to say GSAP has given me hope again. I switch from jQuery animations (and some css3 jquery plugins) to GSAP tweens and instant performance gains! However, I'm still not happy with the performance I get on my Samsung Galaxy S2x. It's a pretty decent phone so I know it has the power to play some high end games. I think using phonegap's browser plugin caused some issues, but even using mobile chrome the performance is choppy and not good enough for a production app. Of course, I could be doing something very wrong as I'm new to the mobile HTML5 scene. I'm hoping someone might be able to help determine if my issue is animation related or just bad code in general. My animations are pretty simple: TweenLite.to(jem, animationSpeed, {top:(blockSize*row)}); It's maybe all the other stuff that gets in the way? I've put everything in jsbin for easy viewing in browser and on mobile devices: http://jsbin.com/uyAXume/9/edit Thanks for any help or pointers.
  6. Might be doing something wrong here, but I'm curious if anyone else has had this issue. I am trying to animate the border of an input area from 0 to a width back to 0. Going from a width to 0 works fine, but going from 0 to the width immediately jumps to the width while everything else animates. I've made an exaggerated example here: http://jsfiddle.net/Haxen2000/Df8xj/ The original margin is what the border width should be; just made it larger so the issue is more visible. Thanks!
  7. Hi everybody, First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English). i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation. The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be a wasted time I think. So, ive searched on the web but I found nothing that I can use. I work with Adode Design Premium CS5, so i can't use CreateJS as plugin for Flash and I haven't Edge Animate. I tried Swiffy but It doesn't seems to work. I tried to do something like this in Flash: function createCSS () { for (var i:int=0; i<numChildren-1; i++) { var mc:MovieClip = getChildAt(i) as MovieClip; tabMC[i] = mc; trace ('#'+mc.name+'{'); trace ('position:absolute;'); trace ('x:'+mc.x+';'); trace ('y:'+mc.y+';'); trace ('}'); trace (''); } } wich display a "potential" CSS style-sheets of all the elements but if I want it works, i will have to export each element in SVG with Illustrator with the same name used by Flash, and that also seems to be a wasted time. Is there another solution you see to do this ? I hope Ive been clear, my english is so bad. Thank you in advance for whatever help you can give me. Notice that the animation size is very low (52ko) i want to keep this size as lower as possible, even in HTML5. ps: attached file contains the .fla ATRT_anim01.zip
  8. Wondering if there's a way to get around a "popping" issue I'm seeing in CSS animations. It seem to happen when handling the animation both natively and via gsap cssplugin. I did some googling and found this post which seems to fix it in native css animation, but when i try the same technique in gsap i still see the same issue. Here's the post on stackoverflow for the native fix and here's a jsfiddle showing that it works well and finally here's a jsfiddle of the same thing via gsap. Any thoughts on why this is happening and/or how I may go about resolving it?
  9. I'm not sure how to concatenate a percentage value into a GSAP tween. buttonBritney.addEventListener("click", function() { callSlideIndex = 0; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 0; }, false); So far, this doesn't work. Maybe there's something in the syntax I'm doing wrong? I realize that we cannot use absolute percentage values, but we can use relative percentages. So I'm trying to calculate a percentage mathematically before entering into the tween function. But I assume there should be quotes added that need to be escaped with a percentage symbol just before the ending quote. But this doesn't seem to have any effect. Your help is appreciated. LONGER, DETAILED EXPLANATION FOR CONTEXT I have a webpage with an image that must fill up the full width of the window. But, there are five more images off-screen that need to be called by a series of buttons along the bottom. Each button calls up a different image and that image should slide into place, taking up the full width of the viewport. I managed to do this by placing the six slides inside a slide container set to 600% the width of a div that is itself 100% of the browser window. Let's call that the slide viewport. It's big enough to just show one slide at a time. In the CSS, I set the slide viewport to overflow=hidden. By setting the left value to a multiple of 100%, I can shift the slide container so that a single slide fits right inside the viewport. Left: -100% shows the second slide, left:-200% shows the third slide, and so on. But I can't specify TweenLite.to(slideContainer, 2, {left:-100%}); because that's not permitted. But depending on which slide is currently showing and which one is next being called, I need an absolute percentage value, not a relative one. Thus, I came up with a formula that figures out a percentage value by assigning index numbers to each slide and then plugging that value into the tween. But it doesn't seem to work. I suspect it's a syntax problem, but I'm not sure how GSAP concatenates relative values, especially if it's a calculated percentage value. For context, here's the HTML/CSS ... DOCTYPE ... <title>GSAP test</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="js/gsap_test_07.js"></script> <style type="text/css"> body { background-color: #000; margin: 0px; padding: 0px; width: 100%; } #slideviewport { margin: 0px; padding: 0px; width: 100%; overflow: hidden; } #slidecontainer { width: 600%; position: relative; } .slideimage { width: 16.65%; float: left; } #nav { width: 100%; } #nav img { width: 16.65%; cursor: pointer; } </style> </head> <body> <div id="slideviewport"> <div id="slidecontainer"> ... six slide images ... <!--ends div#slidecontainer --></div> <!--ends div#slideviewport --></div> <div id="nav"> ... button images ... <!--ends div#nav --></div> </body> </html> And here's the JS // JavaScript Document //in order to get all the JS actively running, you must 'init' upon window load window.onload = init; //enclose all functionality inside the init function and wrap around everything function init() { //establish variable for slide container var slideContainer = document.getElementById("slidecontainer"); //establish variable for slide index numbers var currentSlideIndex = 0; var callSlideIndex = 0; var leftPercentage; //establish all variables for buttons var buttonBritney = document.getElementById("imgButtonBritney"); var buttonKesha = document.getElementById("imgButtonKesha"); var buttonAmy = document.getElementById("imgButtonAmy"); var buttonYeller = document.getElementById("imgButtonYeller"); var buttonOlivia = document.getElementById("imgButtonOlivia"); var buttonReclined = document.getElementById("imgButtonReclined"); //animate slides in accordance with buttons pressed in navigation buttonBritney.addEventListener("click", function() { callSlideIndex = 0; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 0; }, false); buttonKesha.addEventListener("click", function() { callSlideIndex = 1; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 1; }, false); buttonAmy.addEventListener("click", function() { callSlideIndex = 2; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 2; }, false); buttonYeller.addEventListener("click", function() { callSlideIndex = 3; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 3; }, false); buttonOlivia.addEventListener("click", function() { callSlideIndex = 4; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 4; }, false); buttonReclined.addEventListener("click", function() { callSlideIndex = 5; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 5; }, false); //closing brace for init } Thanks!
  10. Hello Everyone, Is force3d:true deprecated.. i dont see it in the CSSPlugin docs either anymore, unless I'm mistaken and it was never there to begin with: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html I was doing some simple animation tests and noticed that i keep getting this error regarding force3d:true in the console invalid force3d tween value: true http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.0/TweenMax.min.js Line 15 i made a simple code pen so you can see the error thrown in the console: http://codepen.io/jonathan/pen/Hcvuq I have used force3d:true before but was wondering if it was recently deprecated or am i missing something here? I even saw it using version 1.10.3 I am using the force3d:true even inside the css{} object and still seeing the message above in the console Any help as always will be highly appreciated.. Thanks
  11. I'm just beginning to get my head wrapped around a project which involves porting some of my Flash applications (built with TweenMax) over to javascript. I'm trying to understand what the best practice is for translating a fixed-coordinate system (Flash) to a flexible / multiple-resolution environment. (HTML). My Flash applications all run at full screen, so in order to simply account for all mobile environments, I assume that one simply creates a "screen sized" DIV set at height/width 100%. But since TweenMax uses a numerical coordinate system, I'm wondering if there's a commonly used approach to translate that to a percentage-based coordinate system? Can TweenMax work with percents instead of fixed coordinates? The examples I've found seem to use multiple CSS definitions for multiple platform types -- although this seems like a real pain -- particularly if the coordinates don't need to be that precise. Or is a % based method inadvisable for some reason?
  12. Hi Everyone, Been using greensock for a couple of months now. I finally got us to upgrade to the newest version and some things are different. My issues is we have a main big timeline that our animation runs on. There are points in it when we pause the timeline and people need to click on stuff and other animations happens. After they click everything they need to we restart the main timeline. The click functions have their own timeline with tweens in them. Well on the newer version we are using, when we resume the main timeline it ignores the css/tweens that happen in the click timeline. It restarts like the clicks animations never happen. Before on the older version we used that didn't happen. I'm seeing if there is a way to have a main timeline and have it keep the css and animtaion end tween from click on resume of the main timeline. I hope this makes sense. Thanks.
  13. It appears that once you change CSS properties that effect page layout, the effected elements can no longer be animated using GSAP. I have an example here that is a simplified version of my project. Click on any of the colored rectangles to see what I'm describing. The first time you click, it transforms and scrolls to simulate zooming in on a rect. But since doing so also changes layout CSS properties - it breaks as soon as you start animating again in a peculiar way. You won't be able to tell from the example why it is necessary to change layout properties, but it is something I need to do in my actual project. You can see the behavior I expected would happen by commenting out the lines of code that effect layout. Or view the fork that does so here. Is this a known issue? Am I the only one who needs to manipulate layout effecting properties between animations?
  14. what is faster.. using jQuery css() method or GSAP set() method. for example: // GSAP way TweenMax.set($image, {'opacity':1}); // or jQuery way $image.css('opacity',1); I was wondering which is faster or better to use? Should i only use set() for the properties that will be animated? Im used to setting css properties via jQuery css() method .. but wanted to know if the GSAP set() method is faster or more efficient? Any help will be highly appreciated?
  15. I'm trying to tween a percentage value on a div for css transform: translateX() with the following code: TweenMax.to(this.ui.$drawer, 0.5, { css: {x: '-100%'} }); The element has transform: translateX(0%) applied initially. However, it appears that the tween is just converting the string to a unit-less integer in the transform matrix instead of treating it as a percentage 1-100. So, the div ends up moving -100px instead of -100%. Is there any way to use percent values with the x and y css tween properties? Percentages seem to work ok for absolute position top/left, but I'm trying to take advantage of improved performance with transform: translate in mobile browsers. I'm working with a liquid layout so being able to use percentages would be extremely helpful.
  16. How would you clear all CSS properties that were applied to an animation element by TweenMax? var tween = TweenMax.to($image, 5, {css:{ scale:1.5 }, ease: Linear.easeInOut, onComplete: function(){ tween.invalidate().progress(0); } }); I basically want to reset or clear all CSS properties that TweenMax adds to the inline style tag. So i can get the element back to its original state before it was animated by TweenMax. I was testing with tween.invalidate() .. but I was unsure if this was correct? Thank you for any help!
  17. 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
  18. 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.
  19. I've been working on reproducing one of my favorite card games in JavaScript and I'm having some problems getting the 3d rotations to work the way I'd like. I'm using TweenLite to flip the cards' divs with rotationX and rotationY, but I can't figure out how to tell when I need to swap out the front and back of the card. Is there a way to detect which side of the card is visible? I've seen it done with CSS like this: http://davidwalsh.name/css-flip, but 'backface-visibility: hidden' doesn't seem to affect objects that are rotated with TweenLite.
  20. 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.
  21. 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
  22. 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.
  23. 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'.
  24. 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.
  25. 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?
×