danehansen

hey i have noticed that some svg specific attributes will be tweened without using the AttrPlugin and {attr: {}} syntax, and some will. is this a feature that is currently in works or is there a reason that only some but not all of those attributes work that way? thank you.

I cant for the life of me get a simple 3d rotation working in iOS Safari right now. It works from the Codepen for me, but not with all the same code in a simple html file (attached). This tells me I am probably doing something dumb. But basically it works correctly from desktop, but from my phone the rotated div disappears as it rotates. Please help. http://codepen.io/anon/pen/raYMwR index.html

its all in and functioning perfectly. thank you for your help. i will post a link here once it launches.

yes this is extremely helpful. my only question now is how does this fit in with a .fromTo function? or does passing in the segment on a .to function already encompass both the starting and ending values? thank you so much.

ok so i ended up going with linear tweens on the last project i originally asked about this for (oregongridiron.com) but i want this to work again for my latest project and still having trouble. if i run my points through the BezierPlugin.bezierThrough method, i get back an object with x and y values. each of those is an array that is the length of my points minus 1, and each value of that array is an object with a, b, ba, c, ca, d and da values. so my question is how can i take the segments of this object and make separate tweens with them with durations that i define? example: var points= [ {x:0, y:-50}, {x:50, y:0}, {x:0, y:50}, {x:-50, y:0} ]; var bezierObject=BezierPlugin.bezierThrough(points); //and here is where i dont fully understand how to finish. if i want to tween just from points[0] to points[1] with my own duration, i know where to find the start and finish x and y positions, but i dont know how to fit in the b, ba, c, ca, and da values to make this a curve: TweenLite.fromTo(targ, 1, {x:bezierObject.x[0].a, y:bezierObject.y[0].a}, {x:bezierObject.x[0].d, y:bezierObject.y[0].d, ease:Linear.easeNone}); i suspect the solution is that i would need to build a custom ease to pass into each tween? if so, not positive how to do that but will be looking in the mean time.

not sure the best way to clearly illustrate what i'm thinking but giving it my best try... i'm wondering if there is a way to use Draggable as the controller for something that is other than an item being dragged or scrolled on stage. specifically what i am after is that i have renderings of a 3D object with rotates 360 degrees. i plan to make a sprite sheet out of that and i figure i could place an invisible Draggable object of the top that when it gets scrolled/thrown, i read out those changes and use it to change which frame of the sprite i am on. is there a way to do this without having a transparent dragging object over the top? and if not, is there a way to have my invisible object be infinitely scrollable or would i just have to size the window as the size of my sprite and then have the thing inside just be 999999999px by 9999999999px? thank you.

maybe i am confused but i feel like i have read conflicting arguments on animating x and y positions. i seem to recall somewhere else in addition to this form argues that animating a x and y transform should be more efficient than a top/left value, but in the CSSPlugin documentation it says the opposite. which is the more efficient way?

ok so to do percentages for bezier, i would just need to tween numeric values on an object, then add an onUpdate function where i use those numeric values and add a "%" when appying that css to the object?

Is there a way to tween the values of an array when in a for loop? I saw that there was an endArray plugin for the AS version of greensock which is close to what i'm looking for, but it doesn't appear to exits in js. Trying to do something like this: var array=[0,1,2,3,4,5]; for(var i=0; i<array.length; i++) { TweenLite.to(array, 0.5, {i:0}); }

i like your solution with the BezierPlugin.bezierThrough() method. i think this will do exactly what i want. but i have some further quesions. so if l pass all my points through that method like so: var tracker1Positions= [ {x:13.3, y:19.5, progress:0}, {x:34.2, y:13.8, progress:0.25}, {x:54.4, y:12.4, progress:0.5}, {x:63.6, y:13.8, progress:0.6}, {x:75.0, y:22.8, progress:0.75}, {x:78.6, y:25.2, progress:0.8}, {x:84.7, y:27.0, progress:0.9}, {x:89.0, y:27.3, progress:1}, ]; var bezierPoints=[]; for(var i=0, len=tracker1Positions.length; i<len; i++) { bezierPoints.push({left:tracker1Positions.x,top:tracker1Positions.y}); } var bezierSegments=BezierPlugin.bezierThrough(bezierPoints); i get back an object of 7 cubic bezier objects. it is one less in length than that of my object, because it is a bezier of each in between, correct? so then would i need to plug these 7 values into a TimelineLite, each with a TweenLite.fromTo call? also for what i am doing, these values need to be percentages, they aren't pixel values, so how does that factor in? i noticed taht calculating the bezierSegments with percentages breaks it and returns a bunch of NaNs so they are going through as numbers at that point. i am guessing that step would look something like this, but from the documentation online i am not fully sure how to finish this: $scope.timeline=new TimelineLite({paused:true}); for(i=0, len=bezierSegments.length; i<len; i++) { $scope.timeline.insert(new TweenLite.fromTo($scope.tracker1, tracker1Positions[i+1].progress-tracker1Positions.progress, {bezier:{type:"cubic"}}, {bezier:{type:"cubic"},ease:Linear.easeNone}),tracker1Positions.progress); }

i am wondering if it is possible to use the BezierPlugin to create a curve that not only goes through a series of points, but will hit each of them at a defined amount of the way through the tween? using an array something like this: var tracker1Positions= [ {x:13.3, y:19.5, progress:0}, {x:14.8, y:19.0, progress:0.1}, {x:16.8, y:18.3, progress:0.7}, {x:19.0, y:17.9, progress:0.75}, {x:21.0, y:13.3, progress:1}, ]; my end goal here, is that i have a video that will have a some dom elements following certain items in the video, and i think a bezier curve would make a much smoother way to simulate tracking than just straight tweens. thank you.

Oh sorry I am an idiot and pasted the wrong js import. But yes, it is fixed as of whatever version is up today. Thank you.

When I attempt to tween using className, I am not seeing a tween of that classes properties as it is applied/removed, but rather an instantaneous application/removal of the class. I have had this problem on a few projects, and it is usually in a menu when I am trying to tween the activated menu item. I am using this version of greensock:http://code.jquery.com/jquery-latest.min.js ex: //to activate: TweenLite.to(element, 1, {className:"active" ,ease:Linear.easeNone}); //to deactivate: TweenLite.to(element, 1, {className:"" ,ease:Linear.easeNone}); Is there something I am doing wrong or not understanding?

another oddity: i changed the ease to "Back" and during the shrinking part of the ease, the mask is a perfect circle as it should be. only during the growing part does it mess up.

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.

That latest version still works good. Thanks.

Amazing. That fixed the problem for sure its working perfectly now i iOS. Thanks dude.

Hey so i'm not sure if this is a greensock bug or a browser bug or me just pushing the limits too much, but what i have noticed on a couple projects i've started lately is that where i may have a bunch of tweens going on successfully in Chrome or Firefox, that when i test in Safari or on my iPhone, the animations dont seem to fully update visually. if i resize the window or anything like that, the screen corrects itself. where i've run into it, the problem doen'st happen if only 1 or two things are tweening at once, but if a more than a handful are tweening at once, it seems that the browser cant keep up or something. if you zoom in or out or rotate the screen or something to get the browser to react, the end of the animation will rectify itself after its been messed up. even with the window resize listener turned off. you can check out one project currently in progress where you can view this. to see them problem, in safari or on iphone open the link, then click between "bird" and "big bang". you will see that the divs and the nav elements will linger in Safari and iOS, yet not in Firefox or Chrome. if you step across the nav one at a time, (big bang, liquid, snakes, globe, wedges, candle, bird...) then it tweens fine in all browsers. http://danehansen.com/temp/gs

i've come across the exact same problem here, and i will post souce. in my source you will see that i had to do the exact same display:none workaround to get my lightbox to stop absorbing all the mouse events. bin.zip