Jump to content

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

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. Thank you, that is a good idea re: ratio.
  2. Programmatically setting a tween with duration 0 results in progress calls returning NaN. I expected 1. This is an edge case, but seemed worth reporting as it caused me to stumble. Thank for taking a look at this issue and happy tweening to you all.
  3. Alas, vue has changed considerably since I was working on this project. Sorry.
  4. Thanks, and good idea how to get at the information I want.
  5. Is there a way to query the ticker for the priority (.pr) of the last dispatched event? This would be real helpful at times.. especially when dispatching custom events before and after tweens and wanting to know where we are in the series of events. For example, would want to be able to query TweenMax.ticker if I am at priority -100 or 100 from when these are fired: TweenMax.ticker.addEventListener('tick', preComponentPaintCb, this, false, -100 ); TweenMax.ticker.addEventListener( 'tick', postComponentPaintCb, this, false, 100 ); My research suggests this information is not available... and if I wanted to add it, I would so hereabouts: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L6320 by adding something like this.lastPr = listener.pr; Help and suggestions appreciated. I've a related question but will hold on until I get some feedback on this one Thanks!
  6. Yes, that is helpful! Thank you all for explaining how to best understand this use of your library.
  7. Alas, timeline.smoothChildTiming = true did not seem to do the trick. FWIW, here are two demos next to each other showing the desired behavior of the two tweens and the not desired behavior I get when they are added to a timeline: [1] Here is a codepen with two tweens not added to a timeline. At the 5 second mark, the red square has updateTo called on it and it accelerates to its new target. This is desired visual behavior: [2] And, here is a codepen with the tweens added to a timeline. At the 5 second mark, the red square has updateTo called on it and it is moved back to its origin before accelerating to its new target (effectively restarting the tween):
  8. If resetDuration is set to false there are no hiccups (yea!). This works if the tweens are added or not added to a timeline. In my example under those conditions, the two tweens take 10 seconds to complete and look great. However, if the tweens are added to a timeline and then resetDuration is set to true, one tween apparently restarts when onUpdate is called. Compare this to when the tweens are not added to a timeline -- no hiccup/restart and the total time of the animation is ~15 seconds. This is the visual behavior I was looking for. What am I trying to accomplish? My goals (which led to my original post): - Get a callback when both tweens have been updated. This is why I thought to put the tweens into a timeline. - When one/both of the tweens has updateTo called on them, do _not_ set resetDuration to true, but instead to extend the duration of the tween. A solution I came up with (which works for me!) was to not use a timeline and instead I keep track of every tweens' onUpdate. Since I know how many tweens there are, I can count their onUpdate callbacks and when they've all fired I do my all-tweens-are-done logic then.
  9. Sorry for the obtuse code. I've cleaned it up some and hope this is easier to grok. You can change the behavior which adds the tweens to a timeline by toggling the variable addToTimeline to true.
  10. I am tweening a few javascript objects. I use onUpdate to move things on screen and they tween like butter. Sometimes I call updateTo on the tweens and they update like the blue angels in fighting formation. However, I need to check all of these objects' values after each has tweened to ensure they remain in some bounds. I thought the way to do this was to put them into a timeline since the timeline's onUpdate is called last. However, I've hit a snag -- when the tweens' updateTo are called, now that they are in a timeline, the tweens are restarted? My workaround is to do my own bookkeeping and when the last of my objects has been tweened, then I will do my boundary checks. Or is there a way to use a timeline in this unconventional way? Thanks.
  11. erikb

    checking if in delay?

    Yes, thank you. And i see how i can determine how far into the delay my tween is with these calls as well.
  12. .isActive let's me know if my tween is actively updating values (natch). But is there a way to check if I am in a delay? Please see my simple codepen for example.
  13. erikb

    eased progress?

    Thanks Jack. DId not not know about that... will snag!
  14. erikb

    eased progress?

    twn.progress() will give you your percentage through a tween. But Is there a way to get your eased percentage through a tween? The way I am thinking to do it 'out of the box' is to tween a variable from 0 to 1 (along with my other values) and check that variable on update. But would be super if there is an 'in the box' way I have overlooked. Thanks!
  15. No browser extensions installed. This is on Chrome Version 60.0.3112.78 (Official Build) (64-bit) running on macOS 10.12.6 (16G29). As you see in the video, the initial load does not have the large stack trace. Those come with subsequent reloads.
  16. In looking at my original post, I do not see where my codepen link is... so here it is: https://codepen.io/jedierikb/pen/YxWXez?editors=0010
  17. I have recently noticed some large stack traces in my javascript console when debugging greensock tweens in chrome. If you look at the example codepen url, you will see that `requestAnimationFrame (async)` is called repeatedly on every `onUpdate`. I think something has changed in Chrome, as I don't ever recall seeing such long callbacks when debugging before. Any suggestions how to reduce/suppress those stack traces? (And out of curiosity, what's going on to cause those stack traces?) Thanks!
  18. I have an element tweening filter to contrast(0.5) over a minute and then, based on user action during that minute might also have to tween filter to blur(3px) over just a few seconds. I worked around this using a proxy object and creating the filter string on onUpdate. Wondering if this is the sort of thing that making myself a plugin would be good for [1]? Is there a plugin example more aligned with what I am describing for reference? Thanks! [1]
  19. Any development on this? I find I often use gsap to position elements with complex transforms, so performance for handling translate percentages is not a problem.
  20. Of course, it looks like the proper way to do this is to use the Draggable's onClick events, but I got snagged retrofitting some code and using existing event handlers.
  21. This issue I've encountered and worked around is likely addressed somewhere in the last few years. But this thread seemed relevant. This works great for click and drag: http://codepen.io/jedierikb/pen/ORKvJm?editors=0011 This does not: http://codepen.io/jedierikb/pen/XjvBGb?editors=0011 The difference is adding the event listeners for click events _after_ the Draggable.create.
  22. Great explanation -- makes sense. Thanks. You're right -- no need to use ThrowPropsPlugin here at all.
  23. I am using ThrowPropsPlugin on an element, $x. When it is complete, I reset its position via set( $x,{x:0, y:0}) and run the same ThrowPropsPlugin again. It works like a baseball pitching machine. Here it is: http://codepen.io/jedierikb/pen/NRZRgz Now, if I add this one line of code to that example, and also make the element Draggable via Draggable.create($x, {}); Then the baseball pitching machine does not work as expected -- the element $x begins out of bounds. Here it is: http://codepen.io/jedierikb/pen/WGLGRy Advice? Thanks.
  24. Thanks for the explanation. I appreciate the reasons given and agree with you on flexibility first. To recap: for a project I was asked to implement a draggable with some moderate logic (locking axis depending on current state, moving other elements in tandem). It was really easy to do with Draggable. I was pleased. Seeing how great the Draggable looked, I was asked to simulate the draggable when a button was pushed (in addition to the implemented click and drag behavior). My first thought was, 'oh, I bet when I use ThrowPropsPlugin it will engage all of the existing Draggable callbacks' and when it did not I was surprised it did not work. So I came to the forum for guidance. Thanks to Carl I quickly understood how to refactor my code and completed the requirement. Thanks to Blake I have a lot of inspiration and examples. Thanks to greensock I understand the design decisions behind the tools I use. Much appreciated.