andyr
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by andyr
-
TweenLite.to(e.target, 2, {"-webkit-filter": "grayscale(1)"}) Should I be using EaselPlugin? Using vendor prefixes I can animate to the CSS filters - https://developer.mozilla.org/en/docs/Web/CSS/filter, but the switch is instant - the duration is ignored.
-
Yes, Angular. Correct order? Switching node positions with insertBefore?
-
Thanks OSUblake. Yes, I'll need to get ThrowProps plugin to get getDirection('velocity'). For now I'm doing a simple, last_x vs this.x comparison to determine drag direction, like in the demo. I've been trying various methods to do a draggable photo gallery. The way I was trying to do it above (not touching the DOM and using the transform values to get their positions, then move things around) - won't work responsively. So I either do it: a. Percentage co-ordinate positions based on the bounding box. b. Inserting DOM elements - which your grid demo linked above appears to do. Not sure which is the best method. I was having trouble updating the layout and inserting nodes. Will have to post a CodePen tomorrow.
-
Looking at this Codepen: http://codepen.io/GreenSock/pen/dPZLEp // Calculate x pos to slide to. Starting at target items' current x position. var x_pos = item.target._gsTransform.x - item.width; console.log(x_pos); // Slide the 'hit' item. TweenMax.to(item.target, 1, {x: x_pos}); I'm dragging a box right. On 50% threshold, the "hit" box slides left. I'm using the hit box's _gsTransform.x - the width of the dragged box to determine the x_pos to slide to. However, the _gsTransform.x getting applied to TweenMax.to isn't the _gsTransform.x of the first hit, but the value when the "hit box" and the dragged box are no longer hitting (the x position where the left edge of the dragged box stops hitting the left sliding box). Which makes sense of course, but... Any way to get that first hit x value? Thanks.
-
Is there a way to get the x value (the transform value) of the object being hit, through the API?
-
if(Draggable.hitTest(item, items)) { } items is an array. Is it possible to find out which of items has been hit? Or do I need a for loop?
-
if (Draggable.hitTest('#test')) { console.log('hit'); } Results in: Uncaught TypeError: Cannot read property 'pageX' of undefined. Object, selector - same result.
-
cursor: '-webkit-grabbing', // works cursor: '-moz-grabbing', // works cursor: 'grabbing', // doesn't work cursor: '-webkit-grabbing,-moz-grabbing', // doesn't work cursor: '-webkit-grabbing;cursor: -moz-grabbing', // doesn't work It appears no auto prefixing is done, so need to specify both -moz- and -webkit-.
-
Doh. Thanks Carl.
-
I've got a gallery of items. When dragged, the box's z-index appears to be higher than elements created before, but lower than ones created after. I want the z-index (for the dragged item) to be higher than all other items, not just the ones created before in the DOM. ie box 1 should move on top of boxes 2 - 5, not under them. I've tried ZIndexBoost. Edit: I've also tried applying style.zIndex="" on click, but it's not working.
-
TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0}); The aim is to animate top-left to top-right of browser window. In the above, the 'left' property is still being read in the 'to', so it stays top-left. So I tried overriding 'left' with left: "auto": TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0, left: "auto"}); That sets 'left' back to default, but it doesn't animate from the left: 0 specified in the 'from'. Any ideas? Edit : Although I could do this: {top: 0, left: "100%", xPercent: -100, yPercent: 0});
-
tween = TweenMax.fromTo(class_name, duration, {top: start_y_percent, left: start_x_percent, scaleX: 0, scaleY: 0, xPercent: -50, yPercent: -50}, {top: end_y_percent, left: end_x_percent, xPercent: -50, yPercent: -50, scaleX: 1, scaleY: 1, onReverseComplete:hide, ease: Elastic.easeOut}).progress(current_progress); Box elastic eases in, but on reverse(), I don't want the elastic ease (just the default ease). I've looked at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/reverse/, but not sure if possible using reverse(). If not, what's the best way to do this? Thanks. UPDATE: I killed the tween and created a TweenMax.to to reverse the animation (but with some different properties).
-
Thanks Rodrigo. Your method also solves it.
-
Having issues with tween.fromVars = {}, tween.toVars = {}
-
http://codepen.io/osublake/pen/pJJZdj
-
Just realised I can't use x, y coords at all, if I want a fully-responsive design. Got to do all element positioning in percentages. Button click position has to be in percentages, so does the dialog box. -------- Yes, box appears on clicking a button. Not a codepen, but here's Google's dialog box. Box animated from the source. https://material.angularjs.org/#/demo/material.components.dialog I'm using Angular. I've got a directive and a click coordinates factory.
-
Thanks Shaun. If the CSS has percentages in, then it seems the TweenMax.from has to also be in percentages, so the 2 methods you provided don't work. I just want to animate a dialog box from the click source. I've got the x, y click coordinates, so I will just have to convert to percentages. OR use a JS keep-centered method.
-
Thanks. It appears that you have to specify the TweenMax.from values as percentages. So if my box has this CSS: .box{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); then the tween from positions must also be specified in percentages. You can't tween from x, y coordinates. Perhaps once the animation has finished I can set the vars: top: 50%, left: 50%, because it seems in the background, it's not honouring top: 50%, left 50%, but coordinate values. I just tried that. Doesn't work. So... will have to try converting x, y coordinates into percentages. Surely there's an easier way.
-
I've got a box in the middle of the screen: .box {width: 20em;height; 20em;z-index: 10000;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);background-color: #fff;box-shadow: 4px 4px 80px #000}; When I resize the browser window, the box stays centered. However, when I add a tweenMax.from, to slide the box from a corner of the screen. var tl = new TimelineMax(); tween = TweenMax.from('.box', 2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0}); tl.add(tween); The animation is fine, but when I shrink the browser window, the box doesn't stay centered. Instead, the box just remains in the same position. Any ideas? Thanks
-
Thanks OSUblake. Now solved. Locally, I've got the animation in a directive, with the controller toggling (or could put inline as in your example) and passing in coords to the directive. Will put into animation module. Thanks.
-
This seems to work: Tween.vars.css = {x:200}; tl.restart() works, but tl.seek(0).inavlidate().restart() does not.
-
Things go wrong at this line: Tween.vars.css.x = 500;
-
Line 25 - http://codepen.io/andyroutledge/pen/EjavPd Applying the code from your CodePen, but can't get it to work.
-
var tl = new TimelineLite({paused:true}); tl.add(TweenLite.from('.ng_dialog', 0.2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0, onReverseComplete: hide})); How do you update/overwrite "top" and "left". I've tried various things from the docs, but no joy. OR, add those two properties. .set()? Thanks.
-
Thanks for the demo. I had 'top' and 'left' in the stylesheet, so x and y didn't seem to work correctly. All fixed now.
