Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

andyr

Members
  • Content Count

    31
  • Joined

  • Last visited

Everything posted by andyr

  1. andyr

    CSS filters

    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.
  2. andyr

    Draggable hitTest()

    Yes, Angular. Correct order? Switching node positions with insertBefore?
  3. andyr

    Draggable hitTest()

    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
  4. andyr

    Draggable hitTest()

    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
  5. andyr

    Draggable hitTest()

    Is there a way to get the x value (the transform value) of the object being hit, through the API?
  6. andyr

    Draggable hitTest()

    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?
  7. andyr

    Draggable hitTest()

    if (Draggable.hitTest('#test')) { console.log('hit'); } Results in: Uncaught TypeError: Cannot read property 'pageX' of undefined. Object, selector - same result.
  8. andyr

    Draggable cursor.

    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-.
  9. Doh. Thanks Carl.
  10. 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.
  11. andyr

    fromTo, left, right

    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});
  12. 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:
  13. Thanks Rodrigo. Your method also solves it.
  14. Having issues with tween.fromVars = {}, tween.toVars = {}
  15. andyr

    Tween - CSS centering

    http://codepen.io/osublake/pen/pJJZdj
  16. andyr

    Tween - CSS centering

    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.
  17. andyr

    Tween - CSS centering

    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.
  18. andyr

    Tween - CSS centering

    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 percentag
  19. 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
  20. andyr

    Overwrite tween

    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.
  21. andyr

    Overwrite tween

    This seems to work: Tween.vars.css = {x:200}; tl.restart() works, but tl.seek(0).inavlidate().restart() does not.
  22. andyr

    Overwrite tween

    Things go wrong at this line: Tween.vars.css.x = 500;
  23. andyr

    Overwrite tween

    Line 25 - http://codepen.io/andyroutledge/pen/EjavPd Applying the code from your CodePen, but can't get it to work.
  24. andyr

    Overwrite tween

    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.
  25. 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.
×