Search the Community

Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks

Hello Respectful GSAP community, I am trying to scale up a Fixed Action Button to achieve a special effect of Material Design but I have some frustrating problems which I do not know why these happen, first of all the scale animation that I am trying to achieve is very laggy on desktop Firefox (Latest version) and Mobile browsers (I have tried on iOS 8 safari and iOS chrome) as you can see in my Codepen example, Second, How could I make the first three steps of my Timeline to happen at the same time and then the forth step? Because Now steps other than the first one wait until the scale animation is finished and then start to act and I don't know why! I have just simulated the Scale part because only that is performing laggy! Regards and thanks in advance.

Flexbox is the modern way to lay out an interface, however it still needs vendor prefixes. At the moment I'm using: TweenMax.set(element, { display: "-webkit-flex" }); ... which supports Chrome, Safari and iOS, it would be great to have this work for all browsers by display: "flex". Why don't I just do this in CSS you ask - I have a couple of plugins heavily utilizing Greensock (think carousels, tabs, etc.) that I need to be JS only, so defining the essential structural styles in code is necessary. For me flexbox is the best and cleanest way to layout a carousel or sliding tab content (using Draggable). I imagine the infrastructure is there to accommodate this essential CSS property. It would be a great addition to your CSSPlugin.

I upgraded today from v1.14.2 to 1.15.1 and find that the CSSPlugin.js breaks my code. It seems to change my css properties to be a fixed width at the point of animation so changes to that property after the animation has completed no longer obey my css. This is my tween and, as you can see, nothing fancy except animating a class and then showing an element within that section once animated: TweenLite.to(edit.field, constant.ANIMATION_SHORT_TIMER, { className:"+=is-focused", onComplete: function() { if ($clear) TweenLite.to($clear, constant.ANIMATION_SHORT_TIMER, {opacity: "1.0"}); } }); Here is the css with v1.14.2 for edit.field after the animation: border-bottom-color: rgb(235, 171, 8); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(235, 171, 8); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(235, 171, 8); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(235, 171, 8); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); cursor: pointer; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-weight: 300; height: 55.59375px; line-height: 44px; max-width: 100%; padding-bottom: 4.800000190734863px; padding-left: 6.400000095367432px; padding-right: 6.400000095367432px; padding-top: 4.800000190734863px; position: relative; white-space: pre-line; width: 116.765625px; word-wrap: break-word; With 1.15: border-bottom-color: rgb(235, 171, 8); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(235, 171, 8); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(235, 171, 8); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(235, 171, 8); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(0, 0, 0); cursor: pointer; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-weight: 300; height: 55.59375px; line-height: 44px; max-width: 100%; padding-bottom: 4.800000190734863px; padding-left: 6.400000095367432px; padding-right: 6.400000095367432px; padding-top: 4.800000190734863px; position: relative; white-space: pre-line; width: 90.078125px; word-wrap: break-word; Notice how CSSPlugin added a display:inline-block; line (bold and italicized above) to the CSS that wasn't there with version 1.14. I hope this helps.

Hey all, I'm hitting a very frustrating wall trying to make my tweens work in IE8. When attempting to transform my elements with the x and y properties, I get "error: Invalid argument" on line 1308, which I've traced back to line 1236. It seems that at the beginning of _setIETransformRatio, the _gsTransform object already has the value 'NaN' for its x (or y) property. Strangely, the properties show the correct values right up until the tweens begin, but as soon as they do, the values become NaN. I've searched the forums to no avail. I don't think it's my CSS, as the problem still shows up if I disable it all. Also worth noting is that my timeline is actually paused and controlled by the user's scroll position. Working on putting together a codepen, but any help in the meantime would be greatly appreciated!

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?

Hi, I'm just wondering how to use TweenLite to tween a css property without using the CSSPlugin? I know this is probably really dumb, but I'm trying to get a better sense of what's going on in the Tween. What would I use to do this without the CSSPlugin? element = document.getElementById("element") TweenLite.to(element, 1, { css:{opacity:0.5} }); Thanks for reading.

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

[see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?

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.

Is autoCSS:false somewhere in the docs? Found it another day here in the forum but couldn't find again... It's very useful in some cases!

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

Hi all, I am after an explanation/confirmation if the following is expected behaviour http://jsfiddle.net/4GeQe/7/ First run - fine - works as expected Second run - uses it's existing position as base co-ordinates, then just goes haywire. Shouldnt this end up in the same place at the end as it did in the first run? Regards

Hi, I was implementing a tween based on CSS3's background-size today. That would map to "backgroundSize" as defined in CSSPlugin.js. However, the tween doesn't work in the latest Firefox. While it works perfectly in the latest Chrome. I digged down until I found about this condition in _parsePosition function in CSSPlugin.js: _parsePosition = function(v, o) { if (v == null || v === "" || v === "auto") { v = "0 0"; } Debugging this, I found that 'v' was passed in as 'auto' in Chrome. But it was passed in as 'auto auto' instead in Firefox. Since 'v' was not changed to '0 0' this leads to parsing problem resulting in 'NaN' in o.ox. And thus the effect doesn't work. My TweenMax code looks like something along these lines: controller.addTween( chart.offset().top, TweenMax.fromTo($('.bub', chart), .25, {css:{opacity:0, 'letter-spacing':'30px', backgroundSize:'0% 0%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'0px', backgroundSize:'100% 100%'}, ease:Quad.easeInOut} ), 0, -350 ); I patched CSSPlugin.js locally so that it now handles 'auto auto' case. The backgroundSize transition now works correctly on my machine. if (v == null || v === "" || v === "auto" || v === 'auto auto') { v = "0 0"; } Hope this helps. Not sure of any proper channel to report issue for TweenMax? Natthawut

I'm getting the "Invalid Argument, Line 14, Character 10552" error from CSSPlugin.min.js on IE8 (Standards mode). Here's the bare essentials of the code that makes the TweenLite / CSSPlugin call to animate the "top" property: var sl = document.getElementById('theSlidesContnr'); var ypos = []; var slideHeight = $('.slide:first').outerHeight(); var totalSlides = $('#theSlidesContnr div.slide').length; var automove = true; var snum; var run; var speed = 3000; function moveSlide() { var d; if(automove) { if(snum === undefined) snum = 1; d = snum; if( snum < totalSlides ) { snum++; } else if( snum >= totalSlides ) { snum = 1; } } TweenLite.to(sl, 1, { css:{ top:ypos[d] }, ease:Power4.easeOut }); //TweenLite.to(sl, 1, { css:{ top:parseInt(ypos[d]) }, ease:Power4.easeOut }); } function autoRotate() { run = window.setInterval( moveSlide, speed); } function init() { for( var i=0; i < totalSlides; i++) ypos[i] = -(slideHeight * i); autoRotate(); } init(); Tried both "//{ css:{ top:ypos[d] }" and "{ css:{ top:parseInt(ypos[d]) }" but got the same error. The same code works fine in the standards browsers & IE7. I made sure to grab the latest greensock JS download. This is similar to another CSSPlugin error in IE8 but for a different line/character location in the code.