Bragolgirith

Hallo Carl, I'm running Windows 7, happens on Chrome, Firefox and IE. An easy way to reproduce it is to resize the browser window to be just big enough to cut off half of the 'Support' button.

A separate (and veeery minor) website issue - didn't want to open a new topic just for it: There's a bug on the navigation bar where the 'Support' dropdown menu will open with a small gap at certain browser window sizes (width within 900px-1000px, happens all the time on my dual-monitor setup). Since the context menu closes on mouse out, it makes it impossible to click without having to resize the browse window. (see attached screenshot).

Hello, A quick question (since I couldn't find any information about it on the website): We are using bower for production and found the 'git://github.com/greensock/GreenSock-JS.git' repository (among a few others that 'bower search greensock' returns). Is this one official and production-ready? Also - since the commercial plugins (ThrowProps, DrawSVG, ...) are not included in this repository - is there a 'BusinessGreen' equivalent, so that we don't have to update the plugins manually? I understand that this might not be possible, since they are 'members only' - in which case - what is a good practice for keeping the platform updated? Thank you in advance, Brago.

I'm trying to create an endless carousel with the help of TweenMax and Draggable. The idea is to allow the user to drag/scroll vertically and reset the carousel "y" property each time he hits one of the edges for a seamless scrolling experience. In the following codepen I've partially implemented the code - try dragging upwards. Codepen link: http://codepen.io/anon/pen/vEXbRJ. (tested in Chrome) It is working correctly so far, except for the fact that when the user hits the top edge and I try to set the "y" property of the carousel with TweenMax.set(), the dragging stops and the user has to initiate a new drag before being able to continue scrolling up. Ideally this should all be a single uninterrupted motion. Any ideas on what causes this behavior and what a possible solution can be? Greetings, Brago.

Hello fellow greensock users. I have a very simple use case where I need to translate and scale images from one place to another. Currently I'm doing it like this: // Tween to the new position, width and height TweenMax.to($element, 1, { top: 500, left: 500, width: 800, height: 600 }); From what I understand, in order to enable hardware acceleration (and thus gain better performance f.i. on an iPad), i could replace the top and left attributes with x and y and set the force3D to true, like this: // Reset the element position so that it is correcly positioned after the translation tween. TweenMax.set($element,{top:0,left:0}); // Tween to the new position, width and height TweenMax.to($element, 1, { x: 500, y: 500, force3D:true, width: 800, height: 600 }); My question is: should I additionally replace the width and height with scaleX and scaleY? (Will there be performance gains in doing so?) And additionally: Is there a convenience function in TweenMax that will convert a target width and height (in pixels) to a target scaleX and scaleY (in percent)? I could, of course calculate them manually, just thought there might be a better alternative. Thank you in advance, Brago.

Yes - that does it perfectly. In hindsight, it does make sense to blend in the first image outside the timeline and use it as a background. I will add the stagger function to my arsenal - with access to such powerful tools, one has to start thinking with them. It is indeed a pleasure to work with your libraries, Thank you, Brago.

Hello all, I'm trying to create a slideshow that seamlessly loops photos from an array. It seems like a simple concept, yet i can't seem to find a way to do it by using minimal code. I want to use a Timeline so that i can pause and play the slideshow. If I create a Timeline with {repeat:-1} to show the photos one after another, when it completes it (logically) starts from the beginning, which is to say, from an empty screen. var myTimelineMax:TimelineMax = new TimelineMax({repeat:-1}); for(var i:uint = 0; i<myPhotos.length;i++){ myTimelineMax.append(new TweenMax(myPhotos[i],2,{autoAlpha:1}),2); } This leaves me with a gap after the first loop finishes. At that point I tried to restart the timeline from the 4th second by using myTimelineMax.gotoAndPlay(4) in order to not have that gap, like this: var myTimelineMax:TimelineMax = new TimelineMax({onComplete:onTimelineMaxComplete}); for(var i:uint = 0; i<myPhotos.length;i++){ myTimelineMax.append(new TweenMax(myPhotos[i],2,{autoAlpha:1}),2); } function onTimelineMaxComplete(event:TweenEvent):void{ myTimelineMax.gotoAndPlay(4); } but that just created an ugly transition between the last and the first photo, since the first photo just shows up without any alpha tweening. So I decided to improve on that by adding a tween at the end of the Timeline to show the first photo, but now i had to manage the depth and the alpha of my photos manually. Like this: var myTimelineMax:TimelineMax = new TimelineMax({onComplete:onTimelineMaxComplete}); for(var i:uint = 0; i<myPhotos.length;i++){ myTimelineMax.append(new TweenMax(myPhotos[i],2,{autoAlpha:1,onStart:manageDepthAndAlpha,onStartParams:[myPhotos[i]]}),2); } myTimelineMax.append(new TweenMax(myPhotos[0],2,{autoAlpha:1,onStart:manageDepthAndAlpha,onStartParams:[myPhotos[0]]}),2); //adding the first photo again, so that it animates nicely function manageDepthAndAlpha(cd:ContentDisplay):void{ cd.alpha = 0; cd.visible = false; myPhotosContainer.addChild(cd); } function onTimelineMaxComplete(event:TweenEvent):void{ myTimelineMax.gotoAndPlay(4,false);//needed to set the second parameter to false, otherwise the onStart function wasn't triggering } ...but for some reason the last tween is still not working as planned and the photo just pops up without tweening. Also my code is starting to look like an overkill for such a *simple* task. So here I am, hoping for suggestions Thank you in advance, Brago.

As it often happens, it was an error on my part - I was creating tweens for the same objects in more than one place. I rewrote and simplified that part of the code and it is now working as expected. Sorry for wasting your time and thank you for the wonderful support!

Hello friends, I have a Timeline and am trying to streamline the process of appending Tweens to it. Currently I have: var myTimeline:TimelineMax = new TimelineMax(); myTimeline.append(new TweenLite(someObject1,1.1,{x:100, y:100, rotation:Math.random()*60-30, onComplete:reinitializeObject, onCompleteParams:[someObject1]}),-0.7); myTimeline.append(new TweenLite(someObject2,1.1,{x:100, y:100, rotation:Math.random()*60-30, onComplete:reinitializeObject, onCompleteParams:[someObject2]}),-0.7); , which is working fine. But is there a way to create the tweens with a reusable function, like this: var myTimeline:TimelineMax = new TimelineMax(); myTimeline.append(tweenToBottomScreen(someObject1),0.7); myTimeline.append(tweenToBottomScreen(someObject2),0.7); function tweenToBottomScreen(cdo:DragObject){ return new TweenLite(cdo,1.1,{x:100, y:1000, rotation:Math.random()*60-30, onComplete:reinitializeObject, onCompleteParams:[cdo]}); } so I need only change a single line of code, as opposed to manually editing for every Object. The code above seems to be performing the tween the moment it is created, which messes up the timings. Thank you in advance!