Search the Community

Hi all, first of all congrats on the great animation engine. I am using GreenSock, mainly TimelineMax and TweenMax for timing and tweening positions, rotations etc. of my WebGL / ThreeJS scene objects. The resulting format is always an interactive (Apple) iBook for children - basically a compressed website that runs with a WebKit standard similar to the one used in Safari Mobile. Performance was never a real issue until a colleague recently discovered that certain animations freeze or behave different (jumpy, stuttery) after running for several minutes (about 10-15 minutes dependent on the device) while others still run smoothly. It occurs only on the mobile device and only on generations < iPhone 6. What helps is to throttle the TweenMax ticker fps down to 30, but of course this doesn't look as smooth. I also tried playing with the lagSmoothing - with no success. Do you have an idea where these freezes come from? Since they occur only after a certain amount of time.. could it be that the JS execution stack suddenly becomes too big because the device isn't really capable of doing 60fps? Turning RAF on and of also didn't change much. Thanks for any hints or input.

Hey guys, I'm building some test shapes in 3d, and they're working great so far. I can add, insert new planes , keep them as svg and it's going great... BUT the ads we make here go into a tablet in a WebKit/Webview enviroment. When they do on IOS it looks perfect On Android No matter the size the planes shift Android 1 Android 2 Both different models, and massive screen size differences I tried to figure out how to prevent this from happening, all my values are based off start values which are x y z values so i'm not using hard numbers i dont think... I tried to debug it as best i could and android just doesn't play ball. It wont return offsetWidth, device width returns random numbers which aren't realistic to the stage, device width returns 0, viewport width returns 0... But i dont know if any of them are the reason why this is happening. From what I see the top and bottom planes are perfect, but the side planes are all shifting.. Do you have any idea why? Also off topic but again the codepen made my box different and skewed it.. looks skewed. When it looks like what the above ios screenshot looked like on my desktop(and thats the way it should). But yeah I'm mainly really concerned about those gaps. Any tips? Thanks!

tl;dr: TweenMax + Safari can't read the value of perspectiveOrigin, can set it just fine. Hi, happy customer and big fan here. I'm working on a project where I'm trying to tween the perspective-origin CSS property. It works just fine as long as I TweenMax.set() it, but it breaks in Safari when I change it to TweenMax.to(). Both scenarios work in Chrome. It looks like TweenMax is unable to READ the property's current value when in Safari, which it needs for calculating the tween. It is able to WRITE the value though. If you take a look at my Codepen, switch the method to "to", move the mouse and then hold still for a bit you'll see that the value gets set to the tween's end value as soon as the tween ends. Which is also why TweenMax.set() works just fine, because it doesn't need to read a value, only set it. Any idea how I can get around this without manually checking for browsers and juggling with vendor prefixes? Thanks a bunch, Franz

Hi, I have some issue since the last update with "-webkit-" Not sure this bug has been fixed FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly.I make a simple TweenMax.to('element', 1, {className: "+=active"}); and bam ! http://codepen.io/stephanedemotte/pen/bNRXYO Only on Safari and Chrome. Everything good with gsap : 1.15.0

Hi, I have a problem with transformations in Chrome (webkit browsers). I would like to store the states of the elements in CSS classes and tween the elements from one state to other by class names. In the codepen example I rotate the red box three times, with different methods. All of it works perfectly in other browsers, but in Chrome the first tween is scaling instead of rotating. When I inspect the element I can see that in the first tween the browser use the -webkit-transform with a matrix, and the other two tweens use transform, with matrix3d. What's the solution? Thanks for the help!

Hi, is there any way to disbale "translateZ(0)" hack in v1.15.0 ? Please check the codepen example in Chrome. When I use v1.14.2 it looks cool, but with v1.15.0 scale looks very blurry on webkit based browsers.

Hi all, this is my first post on this forum. I am working on a mobile calendar which requires to manage a large horizontal drag area combined to a important vertical scroll for a mobile web application (in webkit browser : Safari / Chrome) You will find a mockup attached to this post in order to understand what i am trying to do. This calendar has : - on left side : a vertical list of people (called "fixedView") - on right side : a vertical list of blocks which has a horizontal scrollview (using Draggable) in order to swich days by using drag gesture on axis : x (called "InnerView") These two sides are embedded in a "mainView" which is the page container for calendar. (Please have a look to attached file). In fact, i am trying to use a horizontal Draggable (InnerView) into a container which has a vertical scroll (mainView) I made a lot of research , check mobile performances (Galaxy S3 mini to iPhone5) and tests to try : "Scroll In Scroll" : Adding a vertical Draggable for mainView + Adding a horizontal Draggable for InnerView it "works badly" but don't know how to control vertical & horizontal in order to "lockAxis"; right now you can do diagonal drag which is not good (and bad perfs of course) moreover : with this method, i removed native scroll (provide by webkit with -webkit-overflow-scrolling: touch; which brings low perfs on vertical scroll => My Conclusions :using Greensock Draggable to manage vertical scroll is not possible cause we have very bad perfs on low devices I have to use native scroll provided by webkit for vertical scroll (best perfs.) and use Draggable for horizontal scroll (in InnerView) only Do you agree ? So, this is the problem i can't resolve : When i create a new Draggable for InnerView (params below) with {type : "x"}, i can't do a vertical scroll anymore (for sure). What i would like to do is to detect when user is doing a horizontal or vertical scroll on InnerView (by a swipe or drag gesture) . If User is scrolling horizontaly => we use Draggable Instance for InnerView only if User starts scrolling verticaly => we use a "prevent default" for Dragable to release touch bind and so let the browser do a native vertical scroll (webkit) So for this 2nd point, i don't know how to do this. (I had a look on google, GSAP forums, Docs...) I tried to bind the event with onDragStart method but didn't get it. Do you this this is the right approach ? I cant use a Draggable instance with {type : "x,y"} because it would mean that only "InnerView" will scroll vertically but in our case we need to scroll the entire mainview (which include FixedView + InnerView => so the mainView I had a look to "scrollLeft" and "scrollTop" properties and several code pens but i am still blocked. Hope my post is understandable; if you need more details, do not hesitate. Here Draggable Instance for InnerView : innerView = Draggable.create(innerViewEl, { type : "x", bounds : targetStageEl, throwProps : true, force3D : params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, // dragClickables : true, lockAxis : true, // zIndexBoost : false, snap: { x: function(endValue) { return Math.round(endValue / contextInterface._width) * contextInterface._width; } } }); Here DraggableInstance for MainView (bad perf for vertical scroll) mainView = Draggable.create(mainViewEl, { type : "y", bounds : {minY:0, maxY:-3000}, //SimulateLongScroll throwProps : true, force3D : false, // params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, dragClickables : true, lockAxis : true }); Thanks in advance.

Chrome isn't very happy with my transition-rich page. When the site is rendered in a large window (>= 1080p maximized) and transitions are initiated, one or more elements temporarily disappear. DEMO (this is early-dev -- layout is far from complete, so please ignore the scaffolding) I've been poring over stackOverflow and the like for possible solutions, but I've yet to run across anyone with this issue. Any clues would be greatly appreciated.

Hi, The new Chrome has a matrix3D bug and the solution would be to set -webkit-transform: perspective(xxxx). I tried to use the TweenLite.set(element, {transformPerspective:500}); but isnt working. Also if i add manually the gsap removes it when the animation starts. If you check this: http://demo.minic.ro/modules/isntauro in chrome you can see the bug. The solution is to add the transform perspective to the ".back" element. Any help would be great! Thanks!

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.

Noticed a bug involving positional tweens for a DOM element with a dropShadow filter. The reason for the CSS3 dropShadow filter is that I have a transparent PNGs I'd like to provide a shadow for, and GS's box-shadow only adds a shadow to the rectangular block shape of the element. Unfortunately, I've noticed that whenever the filter is applied to an element, I can not position the element via standard GS Tweens. (Ideally this would be as part of a TimelineLite, but the same bug applies to TweenLite / TweenMax calls). Here's a fiddle that shows the phenomenon. By default, the element tweens just fine. However, toggle on the .shadowfilter class (which adds the webkit and FF versions of dropShadow), and the element no longer translates. Any ideas for workarounds for this? Or is this a known bug? I realize that as dropShadow is a filter, this is not going to be supported by GS for sometime, but can I at least still move a filtered element around? http://jsfiddle.net/tkshredder/tYZ8E/9/

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

I am hopeful that someone might be able to offer a suggestion or two about how I might work around an issue that I'm experiencing. The project I am working on is most easily described as a carousel animation sitting on top of a full screen slideshow. It is designed so that when the user clicks on one of the divs that make up the carousel, the background image transitions to the corresponding image as the caousel divs tween to their next position. In IE and Firefox, the animation is perfectly smooth, but when viewed in a Webkit browser, there is a stutter in the carousel motion occurring at the same point that the new background image begins tweening its opacity. Because the background images are full screen, it's my assumption that the stutter is a result of the browser rendering the image and not having to do with the tweening of the carousel panels, but the effect is clearly visible in the tweening. I have tried adjusting the timing of the background transition, starting it slightly before the motion and slightly after. I have also reworked the background animation plugin (anystretch and later vegas) to use gsap for its opacity tween in place of jQuery. I then reduced the height/width of the background images (Though they are still being displayed full screen), and also compressed the jpgs to the point of artifacts in an attempt to reduce file size. I have found a bit of success by swapping the background images for 10px single color squares, though it's not a viable solution. I have put together a fiddle, more like thrown it together from bits and pieces in an attempt to demonstrate the issue. The example can be seen here: http://fiddle.jshell.net/jm23r/35/show/ Does anyone have an idea about how I might either optimize this process specifically for webkit, or more generally reduce the resource utilization in order to smooth out the motion?