Search the Community

Has anyone done any work with Greensock 3D transforms to create dynamic perspective shadows with CSS3? I was thinking this morning that it would most likely not be that difficult, but my 3D math/trigonometry skills are somewhat dormant. What I mean is shadows that will fall on a flat horizontal plane ("the ground") behind the object, as at sunset, and will, as the object moves in x and z directions (not y, as that seems complicated). The shadows would respond to a central light point (perhaps the center of the screen) Something like this image — Thanks for any way forward —

hi! I'm doing something a bit like this; TweenMax.to(element, 0.3, {className:'+=over'}); where the .over class has different colour, position etc, but also different background-position. My problem is, i'd like the background-position to not tween, while the rest of the properties do. is there a way to add an exception to the tween? Any ideas? thanks, Andy

Hi I'm playing with some "clip" animations right now, and find myself calculate way too many hardcoded values. [Edit: this functionality exist, I still wish for the array option] I think that an addition of relative values to clip:rect() will add a lot of flexibility. Also, allowing clip to receive an array of values instead of the CSS syntax rect(a,b,c,d) could help ease development too. something like so: // set initial clip:rect(0, 100px, 100px, 0) as required by CSS TweenMax.set(element, {clip: [0, 100, 100, 0]}) // tween from clip:rect(50px, 80px, 100px, 0) TweenMax.from(element, {clip: ['+=50', '-=20', '+=0', '+=0']}))

So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.

I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html

I am trying to animate back and forth between two css classes and I'm having some issues right now I have two classes "contracted" and "expanded: .button{ border: 5px #000 solid; } .contracted{ width:100px; height:100px; background-color:green; } .expanded { width:200px; height:200px; background-color:red; } And im trying to switch between them with: $( ".button" ).click(function() { TweenMax.to(".contracted",2,{css:{className:"+=expanded"}}).set(".contracted",{delay:5,css:{className:"-=contracted"}}); TweenMax.to(".expanded",2,{css:{className:"+=contracted"}}).set(".expanded",{delay:5,css:{className:"-=expanded"}}); }); http://codepen.io/anon/pen/vzayE And it will tween from "contracted" to "expanded"... but not vice-versa... Is there a proper way to switch classes?

Hey there, is it possible to tween both shadow Inset and the outside shadow at the same time??

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

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

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?

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.

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!

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

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?

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!

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

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?

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.

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?

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?

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.

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!

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

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.