Jump to content

erikb last won the day on January 10 2016

erikb had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by erikb

  1. Is there a way to set precedence for translate and transform css calls on an element? For example, in my pen if I set: TweenMax.set( '#a', { y: '-50%', scale: 2 }); It results in this css: translate(0%, -50%) matrix(2, 0, 0, 2, 0, 0) How would I use greensock to get this result instead: matrix(2, 0, 0, 2, 0, 0) translate(0%, -50%) The latter results in a different position of the element.
  2. codepen example. jammed a whole library in there... sorry. the relevant code is at the bottom. http://codepen.io/jedierikb/pen/oXxvPN?editors=011
  3. This issue [ https://github.com/processing/p5.js/pull/615 ] about interpolating colors for the web project p5.js caught my eye and made me wonder about interpolating between colors in greensock. Are the techniques described therein applied to greensock color tweens Just curious. Thanks.
  4. erikb

    bell curve easing?

    I would love to use greensock to ease through a bell-curve function. I looked at your build-your-own-ease-easily tool, but it really wants to get me from zero to one (instead of from zero to zero). I suppose I could hack this together with a timeline and two sine-like tweens (one for ramp-up, one for ramp-down). However, I am wondering if that approach is better than building a custom easing function. I really want to control the resultant tween like a normal tween with the full API at my disposal. Thanks for any feedback.
  5. Thanks Jack. I am trying to synchronize the movement of other elements on a drag, and the draggable who leads the pack might be of type "x", "y", or "x,y". As you can see, I got snagged when I started moving things around with only an "x" -- the rest of the Blue Angels flew away in another direction Not to be contentious, but in the documentation in the bit you cited, that passage begins by saying "So for a Draggable of type:"x,y", it would be the y transform translation, as in the csstransform:translateY(...)" In the case of draggable type "x", I would expect the first sentence in the documentation to be honored -- "The current y (vertical) position of the Draggable instance". Also, if it is of interest, the .y value jumps to where I would expect it to be onThrowUpdate http://codepen.io/jedierikb/pen/PwMpeB
  6. https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/y/ says .y returns "The current y (vertical) position of the Draggable instance." However, my codepen shows that when you use a Draggable with type x, the resultant y values during a drag do not return the current y position of the draggable, but rather something closer to the relative y position of the mouse. What should I do differently here?
  7. erikb

    draggable snap scope?

    Your suggestion here worked for me. coolObj.prototype.updateThrow = function( _targetEl, _xOffset, _yOffset ) { this.xOffset = _xOffset; this.yOffset = _yOffset; var overlapSwapPct = "25%"; var that = this; Draggable.create( el, { snap: { x: function( end ) { if (this.hitTest( _targetEl, overlapSwapPct )) { return _xOffset; } else { return 0; } }, y: function( end ) { if (this.hitTest( _targetEl, overlapSwapPct )) { return _yOffset; } else { return 0; } } } } }
  8. After I've moved a draggable and onThrowComplete is fired, I call this.disable() and it works as expected. However, the just-momemnts-ago draggable element's css still has: transform: translate3d(0px, 0px, 0px); z-index: 1001; Is there a way to clear these? Note: on onThrowComplete, I am setting up a new layout which the thrown elements are re-positioned and therefore do not need the transform.
  9. If I assign a tween's callback scope like this: { ..., onCompleteScope: this, ... } How can I get access to the tween object (which was the scope before I set my own this)? Thanks, Erik
  10. How do I set scope for a snap function (in a Draggable.create... )? I would have thought something like 'onSnapScope' or 'snapScope', but neither seem to work. Much thanks.
  11. onDragEnd and onRelease both help me know when a draggable item has been let go. How do I detect when the draggable has slid into its new snappable location (i.e. ended its tween)? I think I am looking for something like "onSnapped"?
  12. More here: http://stackoverflow.com/a/15664831/62255
  13. Thanks for the explanations and pointers! Unfortunately, this issue is causing some of my tweens to run into problems. as the completed tween values are not _quite_ the same as the target values and == checks come back negative. I've worked around this issue with this approach, so I can continue hacking along happily: http://codepen.io/jedierikb/pen/OPoQBJ?editors=101 I am wondering if there is a flag in greensock I could set to get the same behavior?
  14. Here is a tween counting down from 1 to .1 on a generic object, but never quite sticks the landing. I suspect there is a flag or option I am overlooking. http://codepen.io/jedierikb/pen/GgXvQx?editors=101
  15. Needed to set a new duration for a tween altered with updateTo (not to reset the original duration or use what was left of the original duration). Did this by tweenInstance.duration( 10 ); tweenInstance.updateTo( tweenValue: 100, true ); It works, but I fear it might break with later versions. Wondering if it makes sense to overload the second parameter of updateTo by allowing a new duration?
  16. erikb

    immediate onStart?

    Is there a way to have my onStart function fired immediately when I play() my tween? Currently it looks like it waits until the next tick and gets fired via _internals.lazyRender. Thank you for your help!
  17. That's great news about the upcoming library/utility. You greensocks are prescient. For my purposes, for this project, getBoundingClientRect did the trick.
  18. This gets you the bounding box... https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
  19. Apologies for this being somewhat off topic. Is there a suggested way to use greensock to find the projected screen coordinates of elements that have been tweened by transforms (as indicated by the values in their _gsTransform)? StackExchange has a suggestion and some code. Wondering if there was a built in solution I have overlooked before going down this path. Thanks.
  20. Ah, thanks. I mistakenly thought the constructor could take the child tweens. Fixed codepen: http://codepen.io/jedierikb/pen/yKlex
  21. brainstorming... This did not seem to work either: http://codepen.io/jedierikb/pen/BsJzp
  22. What is the suggested way to kill a timeline and all of its children tweens? In my codepen, my timelineInstance.kill() is not working as I expected. Much appreciated.
  23. I don't think this is a bug, but rather it is an issue which caused me to scratch my head. If I tween x first as a percent (100%) it slides over. Then later if I tween the element's x as a number (0), the element does not slide back. Tweening back to 0% does what I wanted to accomplish. This small discovery might be helpful to other developers?
  24. This helpful response regarding chromium internals may be of interest to the greensock developer community: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/S_mKrF42a4Y
  25. Apparent performance for this demo is just fine. Greensock continues to perform admirably par excellence. I am trying to debug performance issues wherein greensock is one component and chasing this issue down led to the strange findings reported in my post. Given your expertise in performance tuning with your library, I thought the graphs might make sense to you. I will inquire with the chromium team.