Jump to content


  • Posts

  • Joined

  • Last visited


1 Newbie

Profile Information

  • Gender
  • Location
    London, UK

Recent Profile Visitors

1,879 profile views
  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 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.
  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 "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.
  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: I killed the tween and created a TweenMax.to to reverse the animation (but with some different properties).
  13. Thanks Rodrigo. Your method also solves it.
  14. Having issues with tween.fromVars = {}, tween.toVars = {}
  15. andyr

    Tween - CSS centering