RolandSoos last won the day on January 18

RolandSoos had the most liked content!

RolandSoos

BusinessGreen
  • Content Count

    159
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by RolandSoos

  1. Hi! I'm sorry, but I was unable to reproduce the following issue in CodePen, but maybe you could give me an idea what is going on. The issue happens in Chrome, Edge and also Firefox, so it is probably not a browser bug. Also this rendering issue happens on the first animation only and not all the time. Reproduce the issue: Open https://smartslider3.com/bugs/chrome/carousel1/ Mouse down on one of the blue box and drag your mouse to the left and then release it. While you drag your mouse, my code adjust the progress of the timeline and when you release the mouse, the timeline will .play() The vertical lines appears after you release the mouse and the timeline is playing between the c and d boxes Refresh the browser to try it again The artifact visible on the following video: https://www.youtube.com/watch?v=0f6OU16NlqM 0:13 0:18 0:27 0:49 0:50 The issue is not appear when: The animation started with the click on the right arrow If the animation plays 2nd, 3rd etc... The issue do not appear if you drag to the other direction Interesting facts: The drag use the same timeline what the arrow click does. The only difference that when you start a drag: the timeline paused until and the progress adjusted manually and when you release the pointer the timeline plays. The pane size is 1200px, the box size is 400px and the boxes moved with x: -1200px, so there should not be rounding issues I use round props plugin roundProps: "x", so the x values on all boxes should be fine all the time. It happens only between the c and d boxes I tried to reproduce it on Codepen with a basic structure, but nothing like that happens: https://codepen.io/mm00/pen/aMjKOO Ps.: Setting the background of the container to blue is not an option.
  2. RolandSoos

    Fullscreen Overlap Video Slider

    I think this is what you need. Just move the container to the direction what you want and the inner part to the opposite direction with the same amount.
  3. RolandSoos

    Strange vertical lines between boxes on first play

    One more interesting fact. Math.round(v.toFixed(1)) is very slow compared to: Math.round(v) But The following gives the same result as Math.round(v.toFixed(1)) and runs as fast as Math.round() Math.round(((v * 10) | 0) / 10) https://jsbench.me/cajtgubfls/1
  4. RolandSoos

    Strange vertical lines between boxes on first play

    @GreenSock one extra question if you do not mind. What do you think why this rounding issue only happened with the drag interaction (Setting progress multiple time on a paused timeline and then play) and does not ever happened with with simple play of the timeline? Is there any rare correlation what you can think of? Is it possible for example that click event happens exactly at a tick while mousemove and the mouseup not snapped to the tick?
  5. RolandSoos

    Strange vertical lines between boxes on first play

    Finally the solution With modifiers plugin, I was able to achieve the desired result with: { x: 0, modifiers: { x: function (x) { return Math.round(x.toFixed(1)); } } }
  6. RolandSoos

    Strange vertical lines between boxes on first play

    Yeah, it would be worst by turning roundProps off. There would be lines between every boxes. (Probably I had that floating point conversation few months ago which you remember: https://greensock.com/forums/topic/19625-addpause-the-behavior-is-unexpected/?tab=comments#comment-91640) Here my further findings. 1-3 boxes pt.c = -1200 v = 0.18125000000000002 pt.s = 1200 = 982.5 rounded -> 983 3-6 boxes pt.c = -1200 v = 0.18125000000000002 pt.s = 0 = -217.50000000000003 rounded -> -218
  7. RolandSoos

    Strange vertical lines between boxes on first play

    Well, It happens on my FHD and also on the WQHD monitor. I was not able to test it on HiDPI. My computer is pretty fast, latest I7 and there is no FPS drop when it happens. I wouldn't think it is sub pixel misalignment as I use GSAP roundProps, so the x values always integers. I created a timestamp for the performance record which displays the X values get written by GSAP: I think the problem lies here. The first three bar is the X value for the first 3 box and the last 3 bar is for the last 3 box. The sum of any first box and any last box should give 1200px in every frame. In frame before the frame with the vertical line, the math does not work. GSAP calculates 829 and 372 which gives 1201 so there was a miscalculation and this cause the gap between those two.
  8. RolandSoos

    Strange vertical lines between boxes on first play

    Thanks @Dipscom! Yeah, I'm sorry I know it is really hard to tell anything with that complex code. Yes, I only adjust the .progress() of the timeline. Also the strange thing, it happens few frame after you release the mouse button. Do you feel too that it happens a little bit later? Also Something there is multiple vertical lines as the timeline plays. I was able to catch the issue with Chrome profiler and the vertical line is visible on the screenshot what Chrome made. The vertical line appears in this example three mousemove events later than the mouse button released. The Javascript happens around that line is a GSAP call "wake"
  9. Hi Guys! Well, in the past I got a suggestion to use transform:perspective(2000px) in IE when I need 3D perspective. Now I checked one of my example in Edge 44 - EdgeHTML 18 and there is something wrong with the perspective. The gaps between the three image should be equal, but in Edge the right gap is smaller and it is related to the perspective. Do you have any suggestion? The example works as expected in Chrome, Firefox and even IE11.
  10. RolandSoos

    Edge transform perspective does not behave as expected

    Well, it seems like the example which does not have the "IE fix" works as expected in Edge 18. Do you know what could be the oldest Edge version where it got fixed?
  11. Well, its is very strange. I was in the middle of investigating an other bug when I stuck with this one. When the GSDevTools is in the pen the onComplete callback fired twice on the attached pen.
  12. https://greensock.com/immediateRender I think the immediateRender docs is missing that the same applies not only for .from based tween, but for .set too.
  13. RolandSoos

    immediateRender demystified doc extend with set

    Yeah, my issues solved. And I'm pretty sure it would not be a good idea to change the current implementation. It was just very time consuming and frustrating to understand what happens and why. As you saw in the past weeks I had several edge cases and sometimes I was not sure what is the problem. There was code failures on my end or I had misconception or GSAP had a bug and it was really hard to say which was true (And it takes a lot of time to simplify a complex problem into a simple pen.) I think ALL my issues solved (knock knock) and I hope nothing comes up in the next weeks Thank you for you and your team for the quick and accurate help! I really appreciate it! :)
  14. While debugging my code I used the timeline.paused() method without parameters to get if the timeline paused or not. I have strange results when the playhead was paused at the exact position of an addPause callback, so I checked GSAP source code and I think I found the cause. Timeline p.paused = function (value) { if (!value) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); }; Animation p.paused = function (value) { if (!arguments.length) { return this._paused; } var tl = this._timeline, raw, elapsed; if (value != this._paused) if (tl) { if (!_tickerActive && !value) { _ticker.wake(); } raw = tl.rawTime(); var raw2 = raw; elapsed = raw - this._pauseTime; if (!value && tl.smoothChildTiming) { if (this._totalDuration === 3.203) { //console.log('elapsed', raw, this._pauseTime); console.error('new start time', this._startTime, 'Ez OK:',this._pauseTime); } this._startTime += elapsed; this._uncache(false); } this._pauseTime = value ? raw : null; this._paused = value; this._active = this.isActive(); if (!value && elapsed !== 0 && this._initted && this.duration()) { raw = tl.smoothChildTiming ? this._totalTime : (raw - this._startTime) / this._timeScale; if (this._totalDuration === 3.203) { console.log('start1', this._startTime, 'ticker time', raw2, 'Raw = _totalTime', raw,); window.abcd = true; } this.render(raw, (raw === this._totalTime), true); //in case the target's properties changed via some other tween or manual update by the user, we should force a render. } } if (this._gc && !value) { this._enabled(true, false); } return this; }; When I call timeline.paused() without arguments, the value will be undefined, which evaluates as false, so it goes into the if statement. Your comment says: //if there's a pause directly at the spot from where we're unpausing, skip it. So based on the comment, it should run when it is called with value:false. So probably it should be: Timeline p.paused = function (value) { if (arguments.length && !value) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); }; Ps.: Sorry, I currently do not have time to create a CodePen which illustrates the bug I had.
  15. RolandSoos

    immediateRender demystified doc extend with set

    Yeah, I think I still have confusion with immediateRender. The following two examples shows where my confusion comes: #1 opacity gets the 0 value at create, but on replay it waits until the set position reached. nestedTl.set("#div2", { opacity: 0, immediateRender: true }); https://codepen.io/mm00/pen/MZMKdK?editors=0010 #2 opacity gets the 0 value on the main timeline start for every replay too TweenLite.set("#div2", { opacity: 0 }); nestedTl.set("#div2", { opacity: 0, immediateRender: false }); https://codepen.io/mm00/pen/KJavXQ?editors=0010 I had the wrong conception for imediateRender. As when the immediateRender is true it renders the properties instantly. Like a simple .set() would do. So I used to spare a call with immediateRender:true. But when the timeline plays again, it does not behave like when I set the values in a different call (#2). Probably my confusion with immediateRender comes from the fact, that the immediateRender:true on from* based tweens work like I need and .set with immediateRender:true differs. #3 opacity gets the 0 value on the main timeline start for every replay too nestedTl.fromTo("#div2", 0.0001, {opacity:0}, { opacity: 0, immediateRender: true }); https://codepen.io/mm00/pen/BMpdGw?editors=0010 So if I want proper result for my scenario, I have to stick with the #2 solution and that will give good result combined with invalidate() like in this topic: var t = timeline.time(); //store the current time in a variable timeline.time(0); // seek back to position 0 which allow invalidate to read the proper values timeline.invalidate().time(t); //set it back to that time immediately. --------------------------------------------------------------- Sorry, I don't really understand the question. Can you clarify a bit? I want to help - I'm just fuzzy about what you're asking 🤨 This question was related to: Here is an example from* based example: https://codepen.io/mm00/pen/BMpdGw?editors=0010 You told that immediateRender in this example does not mean that the start value will be properly rendered when the parent timeline rewinds to position 0. But I do not see how your thought affect this example's rewind. Everytime I rewind the parent, Hello World gets opacity 0 no matter what.
  16. RolandSoos

    Bug: Timeline getting paused() at the position of an addPause()

    @GreenSock Thanks, seems fine Are you sure that there is no chance that it results in error if the timeline is not in paused state (playing currently) and .paused(false); gets called?
  17. RolandSoos

    Experiencing with invalidate

    Well, first of all I'm sorry that I always have edge cases So, I started to experience with invalidate and try to animate properties based on the current responsive ratio. My initial test was great and it worked as expected. When you play the Codepen, the code records the current width of the window and on resize it calculates a ratio based on the new value and invalidates the the tweens which need to get invalidated. So the red box will move on a path of a triangle. https://codepen.io/anon/pen/OrpRXr?editors=0010 When the ratio is 1.0 => x:300,y0 -> x:0,y:0 -> x:300,y300 -> x:300,y0 When the ratio is 0.5 => x:150,y0 -> x:0,y:0 -> x:150,y150 -> x:150,y0 I was not able to break this example with resize, so I think it works fine Example when it fails: I have the same timeline, but the outgoing part will wait for a click event. The timeline is paused until the body receives a click event and then resumed. https://codepen.io/anon/pen/wRJzeb?editors=0010 Reproduce the issue: Do not click on the pen, wait until the red box reached the x:0,y:0 position. Currently it waits for the click to happen. Resize the window and the red box will jump on the x axis. Click and the animation continues from the right position.
  18. RolandSoos

    addPause: the behavior is unexpected

    I know my example is silly and there is no real reason in these examples to use addPause. I'm writing an algorithm which will create timeline based on a specific data structure. There are multiple animation stages -> Incoming, Loop, Outgoing and some of them might be empty and they might pause the timeline at a specific label. var tl = new TimelineLite({ onComplete: function() { tl.play("incoming"); } }); tl.addLabel("incoming"); tl.addPause("incoming", function() { // Resume the timeline if the related Promise resolved }); // Add the incoming animations if any tl.addLabel("loop-incoming"); tl.addPause("loop-incoming", function() { // Resume the timeline if the related Promise resolved }); // Add the loop-incoming animations if any tl.addLabel("loop"); // Add the loop animations if any tl.addLabel("loop-outgoing"); tl.addPause("loop-outgoing", function() { // If loop set for multiple iterations -> Jump back to the "loop" label and play // Resume the timeline if the related Promise resolved }); // Add the loop-outgoing animations if any tl.addLabel("outgoing"); tl.addPause("outgoing", function() { // Resume the timeline if the related Promise resolved }); // Add the outgoing animations if any For example if there is no incoming animations, then the addPause for the "incoming" label will be at the same time as the "addPause" for the loop-incoming label. The documentation states that addPause is a null tween with a pause at the onComplete event. So In my pens I set the suppressEvents to false. Problem #1: https://codepen.io/anon/pen/PXEpYY?editors=0011 The console output should be Pause 1 -> Pause 3 -> Pause 1 -> Pause 3 etc... The actual output is: Pause 1 -> Pause 3 -> Pause 1 -> Pause 1 -> Pause 3 -> Pause 1 -> Pause 1 -> Pause 3 Problem #2: https://codepen.io/anon/pen/KbZaEM?editors=0011 Pause 2 should come instantly after Pause 1, but it happens after pause 3. I'm not sure why. Problem #3: https://codepen.io/anon/pen/wRpJBK?editors=0011 There is no way to play the timeline if the addPause placed at the 0 position. I tried with and without supressEvents. Problem #4: https://codepen.io/anon/pen/YdYZOP?editors=0011 If the timeline plays from a label, then addPause fired, but it does not pause the timeline. It reports in the addPause callback that the timeline state is paused, so there is no way to force pause the timeline. Probably the solution for this is to use seek instead of play and play the timeline from the addPause callback when the promise fulfilled: https://codepen.io/anon/pen/KbZWbQ?editors=0011 Problem #5: https://codepen.io/anon/pen/MZrmwP?editors=0011 Tried to solve Problem #4 with seek, but stuck again. If I seek to a new label inside the original play call stack, even Pause 2 skipped and the timeline plays. Then I tried to "escape" from the play's call stack with setTimeout, but the result is even more unexpected, the first tween continues to play and the seek does not happen: https://codepen.io/anon/pen/dwJWOM?editors=0011
  19. RolandSoos

    addPause: the behavior is unexpected

    Well done @GreenSock! It seems like the fix eliminated the issue. BTW, What do you think what was the reason that it happened for you and for @Dipscom less frequently? In Win 10 Latest Chrome and MacBook Air latest Safari, I was able to reproduce with 30% chance in 20 seconds.
  20. RolandSoos

    addPause: the behavior is unexpected

    Thanks @GreenSock! Well, fixing this issue is not important for me, I will fix double fires on my own without touching the source of GSAP. I just needed to know the reason of this bug to be able to produce proper solution for my usecase.
  21. RolandSoos

    addPause: the behavior is unexpected

    Well, I got my first issue related this bug, so I debug deeper. Values are from the Chrome debugger. 4.624-0.001 = 4.622999999999999 // Note: Lost the precision. In a perfect world, it should be 4.623 4.622999999999999-4.6129999999999995 = 0.009999999999999787 0.009999999999999787-0.01 = -2.1337098754514727e-16 and then GSAP end up thinking its a reverseComplete I tried the following code and solved this issue: Line 1766 var renderTime = time - tween._startTime; if(renderTime < _tinyNum && renderTime > -_tinyNum){ renderTime = 0 } if (!tween._reversed) { tween.render(renderTime * tween._timeScale, suppressEvents, force); } else { tween.render(((!tween._dirty) ? tween._totalDuration : tween.totalDuration()) - (renderTime * tween._timeScale), suppressEvents, force); } In my real world scenario this bug caused trouble. I had an addPause callback at some position. To prevent another issue I mentioned in the forum earlier, my addPause callback seeks back the timeline to the real position: var pausePosition; timeline.addPause(function(){ timeline.seek(pausePosition); }); pausePosition = timeline.recent().startTime(); It pauses the timeline properly. Then in the future, when I play this timeline, because of this rounding issue the addPause callback gets fired again as rounding messed up the time and GSAP indentifies that we are in the past and calls the pause again. (It is rare, but happened several times.) Update #1: This float problem is not only related to my small position (0.01s) what I use in my examples. The same can happen with real world values: https://codepen.io/mm00/pen/jdWVGL?editors=0011
  22. RolandSoos

    Bug: Timeline getting paused() at the position of an addPause()

    There might be one other change needed, but I'm not sure. Checking if the value not equal with the current _paused property. Timeline p.paused = function (value) { if (arguments.length && !value && value != this._paused) { //if there's a pause directly at the spot from where we're unpausing, skip it. var tween = this._first, time = this._time; while (tween) { if (tween._startTime === time && tween.data === "isPause") { tween._rawPrevTime = 0; //remember, _rawPrevTime is how zero-duration tweens/callbacks sense directionality and determine whether or not to fire. If _rawPrevTime is the same as _startTime on the next render, it won't fire. } tween = tween._next; } } return Animation.prototype.paused.apply(this, arguments); };
  23. RolandSoos

    Experiencing with invalidate

    @GreenSock, I have a problem related to this solution. I know we talked about tweens in the original conversation, but since then I started to invalidate the whole timeline. When I have a .set() on the invalidated timeline, the original value will be lost if the timeline gets invalidated after the .set() happened. Example: https://codepen.io/mm00/pen/gqaEze?editors=0010 The red box will stay visibility:hidden after the invalidate happens at second turn. I know the logic behind this. Invalidate will force GSAP to read the values again, like it would for a .to() tween. So when the invalidate happens GSAP reads visibility: hidden and it will set that when the timeline restarts. So, as I know the cause, probably I can solve that. I just need to seek back the timeline to the starting position and then invalidate the timeline. var t = timeline.time(); //store the current time in a variable timeline.time(0); // seek back to position 0 which allow invalidate to read the proper values timeline.invalidate().time(t); //set it back to that time immediately. Updated codepen: https://codepen.io/mm00/pen/yZYrRg?editors=0010 So the question: what do you think, is it fail safe?
  24. Well, first of all I'm sorry that every day I have a problem. For the current one, I was not able to create a Codepen which produces this issue. In my real world example, I have an addPause at position 0.001, so when the timeline reach this position, it will wait until the click promise resolved: https://codepen.io/anon/pen/QzZZpo?editors=0110 Also in my scenario, I have a complex scene with lot of animated elements ~100 which repeated all the time. When the event happen which resolves the promise of the addPause and plays the timeline, it seems like that the animation is skipping several frames. The second, third etc. time when it reaches the addPause and the play promise resolved again, the animation is running smoothly. I tried to reproduce the very same issue at CodePen, but it only happened when I animated 10000 other small boxes, so that might be unrelated. Screen recording (watch in full hd) 0:05 I click on the zeppelin. The Zeppelin's promise resolved, so it starts to play from the addPause. This part is important as this is where you will see that the zeppelin jumps instantly in the middle of the screen. The first part of the animation is missing. Console contains the following timings: 0:19 in resolved, this is when the zeppelin was clicked, after this line the timings when this event happened: current js time: 1547202313240 .time() of the zeppelin's timeline: 2.4220000000000006 The next timings are from the onUpdate event of the zeppelin's timeline: current js time is first and the zeppelin's timeline the second Here is a more detailed console which shows the same issue as the video: ____ JS time______ .time() .progress() Play 1547203186098 0.001 0.00031201248049921997 onUpdate 1547203186121 0.2559 0.07987519500780024 onUpdate 1547203186139 0.274 0.08549141965678628 onUpdate 1547203186156 0.2919 0.09110764430577217 onUpdate 1547203186170 0.3060 0.09547581903276132 onUpdate 1547203186189 0.3239 0.10109204368174722 onUpdate 1547203186206 0.3420 0.10670826833073326 onUpdate 1547203186222 0.3559 0.11107644305772227 onUpdate 1547203186239 0.375 0.11700468018720749 onUpdate 1547203186255 0.391 0.12199687987519502 onUpdate 1547203186271 0.4070 0.12698907956318253 onUpdate 1547203186289 0.4249 0.13260530421216843 onUpdate 1547203186304 0.4399 0.13728549141965676 onUpdate 1547203186322 0.4580 0.1429017160686428 onUpdate 1547203186339 0.4750 0.1482059282371295 It seems like the first onUpdate jumped ~0.252s which I think could result that huge jump as the original animation's duration is 0.8s. The timelines whole duration 3.205 If I change the addPause position from 0.001 to 1s the animation plays nicely without jump and this is the console output. There is only ~0.04s jump between the first two. ____ JS time______ .time() .progress() play____ 1547203837755 1 0.23786869647954326 onUpdate 1547203837780 1.041 0.24762131303520452 onUpdate 1547203837798 1.058 0.25166508087535683 onUpdate 1547203837813 1.074 0.2557088487155089 onUpdate 1547203837829 1.090 0.25951474785918166 onUpdate 1547203837846 1.108 0.263558515699334 onUpdate 1547203837862 1.124 0.26736441484300666 onUpdate 1547203837881 1.143 0.271883920076118 I tried several position values and it seems like it has this frame skipping behavior, when the position is smaller than 0.2s. Above 0.2s I get 0.04s between the first two. Under 0.2s, the delay is increasing with lower values. I tried to place addPause to 1.001s and seek the timeline to 1s, but this does not solved the issue. Ps.: if I won't be able to solve this, I will remove the addPause from the start of the timeline and I will start the timeline initially paused and will start to play when the event happens.
  25. RolandSoos

    Missing frames after addPause callback resumed

    Yes, it seems like the fix solved the issue. Thank you! Old: New: I'm not sure if you are interested in another hard to noticeable bug to fix in addPause There might happen that a condition already met when I reach addPause. First though, simply tl.play() in the addPause callback and I will be fine. But, as the addPause happens earlier than tweens and the pause cancels the rendering of that frame. It results if you instantly resume the tween, you will notice a skipped frame if you watch closely. On my example watch the middle of the animation. Hard to notice but you will see the result of the one missing frame: https://codepen.io/mm00/pen/xMKgMm?editors=0011 I know, I could use removePause, but that would take too much effort as I would need to place that back on the onComplete event of the timeline also I need that callback. As a temporary solution I get the tween created with addPause and I play with the data property: // If I allow pause tween['data'] = 'isPause'; // If I want to skip the pause tween['data'] = '';