Jump to content
Search Community

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. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. A post by Carl Schooff, GreenSock's "Geek Ambassador" Hot on the heels of the CSS Myth-Busting article, I'm going to take a deeper look into CSS Animations and how they fit (or don't fit) into a modern animator's workflow. This isn't about simple fades or basic transitions (CSS is great for those); Developers who use animation to tell a story or deliver rich interactivity require a very different workflow than those who are simply doing UI transitions. I'm going to show you exactly where some of the pain points are for a typical project and how they can bring your workflow to a grinding halt. Even relatively simple animations like the one below can become surprisingly cumbersome with CSS. Example of a Simple, "Story-Telling" Animation See the Pen GSAP: Full Version Complete by GreenSock (@GreenSock) on CodePen. Seriously, You guys are beating up on CSS Animations again? Really, I'm not trying to be negative for the sake of being negative. It's just that so many developers are looking for animation tools that accommodate their real-world projects and the industry seems to scream "use CSS!" even though the API doesn't adequately serve the workflow of modern animators who are building immersive experiences or animations that "tell a story". Too many people are being led down a path that results in utter frustration, or at least a lot of wasted time. And no, CSS Animations aren't "evil". In fact, sometimes they're perfectly appropriate (see the CSS Myth-Busting article for details). There are CSS fans who craft animations and proudly shout "Pure CSS! No JS!" as if the grueling effort necessary is a badge of honor. The accomplishment is indeed admirable, and we tip our hats to them. But WOW it's a lot of work and doesn't exactly lend itself to experimentation or easy edits. Quite simply, we aim to change the tide with tools like GSAP. The majority of the GSAP API has been shaped by feedback from real developers in the trenches over the course of many years. The process of animation should be fun and inspiring. Challenge! Still not convinced that GSAP is better suited for professional animators? I'm very interested to see how this animation can be built more effectively. Are you in the CSS-Purist camp? Do you prefer to trigger animations with JavaScript setTimeouts? Maybe you have another library that blows GSAP away. Dig in and build the animation I've been using with your own choice of tools. Below are some resources that should make it easy to get started. When you're done, just drop us a line in the comments or in the forums. Full storyboard showing css values for each key frame: http://codepen.io/GreenSock/pen/DzHBs Starter Pen: http://codepen.io/GreenSock/pen/EsAvF Recommended reading: Myth Busting: CSS Animations vs JavaScript (css-tricks.com guest post) Main GSAP page Jump Start: GSAP JS Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  2. 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.
  3. 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!
  4. 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
  5. 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?
  6. Hey again Greensock guys , I've got a brainteaser for y'all, hopefully it's an easy one. I did do a search around before asking, but the forum search won't include the word 'border' as a keyword, it's restricted, and Google only answered so much of what I needed to know. Okay, so I'm trying to recreate this pen from CSS to JS (GSAP): http://codepen.io/joelrodelo/pen/uHjvi Assumed it would be simple enough but it's proving trickier than I thought. I've been trying to do it with an image on a page, have a quick sample here for reference (you can thank me for the working image later ) : http://webslinger.com.au/dev/gs_border_animation/index.html Some of my attempts or JS fiddles are still in the scripts.js page, just commented out, but they're there for reference. I've just been starting with the left side of the image to begin with. The problem I run in to is that the border appears from the outside in, and any method I've tried to have the border appear from any other direction - either by 'y:' or 'height:' - has failed, moved the entire image with it, or nothing's happened at all (you can see some of my other attempts in the js file). I figured the most logical thing to do would be to nest it, to create a new Tween variable that adds the className and then animate the variable in a new TweenMax line, but I think I've gone wrong somewhere with that approach (read back through the documentation, can we only nest new Timeline's, not new TweenMax's?). Anyway, maybe someone's already figured out an approach to this and I've missed it, or maybe the solution's just too obvious for me to see, cause' surely it wouldn't come to having to actually draw a border line around the image would it? Appreciate any feedback in advance.
  7. 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!
  8. 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
  9. 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?
  10. 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.
  11. 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?
  12. Hello.. i am trying to clear properties on a tween and/or timeline. But no matter what or where i use it, it wont clear the properties off the element (image). sample code below: var tl = new TimelineMax({ paused:true, autoRemoveChildren:true, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }); tl.add( TweenMax.to($("img"), 4, { css:{ transformOrigin:"left top", scale:1.5 }, clearProps: "transformOrigin,transform,scale", //clearProps: "all", ease: Linear.easeOut, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }) ); tl.play(); and here is my codepen example: http://codepen.io/jonathan/pen/rwFva as you can see using your browser code inspector/console.. you can see how after the animation completes the transform properties do not get cleared. You can see how i tried 3 ways that are commented out: the clearProps that is called in the onComplete callback of the Timeline using the set method the clearProps that is called in the onComplete callback of the added Tween using the set method and the clearProps property on the added tween. No matter which way i try to clear properties, i cant seem to have the element clear the properties GSAP has added. If you check my code pen example commenting out each way you can see how its not clearing the style attribute css properties: transform matrix3d, transform origin or any css that GSAP adds to the element (image). Any help will be highly appreciated!
  13. 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?
  14. 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.
  15. 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!
  16. 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
  17. 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.
  18. 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.
  19. In a project I'm doing, I need to match easing feel of elements animated using CSS cubic-Bezier timing function (example:cubic-bezier(0.1, 0.9, 0.2, 1) using tweenmax. Is this supported in GSAP ? I'm trying to avoid writing my own cubic-Bezier plugin if possible Thanks! Orry
  20. 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
  21. 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'.
  22. Using TimelineMax and TweenMax, when doing a zero duration tween to adjust an object's visibility at a point on a timeline, the visibility is toggled immediately instead of in sequence. Example var text = some text object var img = some image object img.css('visibility','hidden') var tl = new TimelineMax() tl.to(text,3,{left:500}) tl.to(img,0,{visibility:'visible'}) tl.from(img,3,{left:500}) The image object will be visible at the start of the timeline animation, instead of after the text object animation. Although it works if you do: tl.to(img,0.001,{visibility:'visible'})
  23. 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.
  24. 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?
  25. 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?
×
×
  • Create New...