动画抖动 #558
Comments
|
I don't quite understand your question. If you need help, please provide a minimal demo, like a CodePen, that clearly illustrates the problem. I wonder if the issue is related to CSS conflicts or some other 3rd party library. Once we see it in context, we'll be able to understand better. Also, you should NEVER apply a CSS transition to anything that GSAP is controlling, otherwise you'll create conflicts and prevent GSAP from applying the effects properly. I'm curious why you have a "transition" in that tween. |
|
codepen地址：https://codepen.io/mxmxixixi/pen/OJdaEYp |
|
I cannot reproduce that problem, but you DEFINITELY should not be using this: // BAD!!!!!
transition:{
ease: "none",
duration: 0.8,
}Like I said originally, you should NEVER apply CSS transitions to something that's being animated by GSAP. I'm curious why you even had that on the tween. What did you think that was doing? If you remove that transition, does it resolve your issue? What browser and operating system? |
|
Modified parameters, still experiencing jitter issue；When the animation starts executing, shake directly |
normal.video.mp4 |
|
The demo you provided on my side did not reproduce the problem in your video, but I think your code seems too complicated, I think simple breathing effect can be achieved without the help of keyframe. The cause of stalling may be caused by keyframe. There are many possible reasons for keyframe stalling. I remember seeing a similar breathing effect in a beginner's tutorial, without the help of keyframe. var tl = gsap.to(".box", {
scale:1.2,
ease: "none",
yoyo:true,
duration: 0.8,
repeat:-1
}); |
|
I believe I found and fixed the issue. Here's a preview of the next release: Better? It'd only happen if the playhead landed EXACTLY on top of the yoyo position in a keyframed animation. Sorry about any confusion there. |
- IMPROVED: ScrollTrigger's ignoreMobileResize is true by default now because a few versions back we switched to calculating the window height based on 100vh instead of window.innerHeight, so it really isn't necessary to force a .refresh() on mobile resize (address bar showing/hiding). This change improves performance on mobile devices because it skips the expensive refresh() when the address bar shows/hides. - IMPROVED: removed a DisplayObject check in PixiPlugin so that it's more compatible with the upcoming release of Pixi.js version 8. See #561 - IMPROVED: the anticipatePin feature works when scrolling in either direction (previously it worked when scrolling forward only). See https://gsap.com/community/forums/topic/39521-anticipatepin-in-reverse/ - FIXED: regression in 3.12.3 could cause a ScrollTrigger that has a numeric scrub value and a snap to prematurely jump to the final progress value when the snap finished rather than waiting for the scrub to finish. See https://gsap.com/community/forums/topic/39363-scrolltrigger-scrub-clip-path-flicker-when-scroll-back/ and #567 - FIXED: regression in 3.12.3 could cause a tween with repeatRefresh: true AND a non-zero repeatDelay not to refresh. See https://codepen.io/GreenSock/pen/yLwLgNQ/db88d564d6308b9fcff7b65efb95febf?editors=1010 - FIXED: if you set a ScrollSmoother's effects() in a delayed fashion (after two ticks elapse after page load), it may not calculate offsets properly. See https://gsap.com/community/forums/topic/39380-scroll-smoother-effects-targets-jump-on-effectstrue/ - FIXED: regression in 3.12.3: if the playhead lands exactly on top of the yoyo position of a keyframed tween, it may render at the state before the animation started (just for 1 tick). See #558 - FIXED: if you set invalidateOnRefresh: true on a ScrollTrigger that's attached to a .fromTo() tween, it may not render at the initial state on refresh(). See https://gsap.com/community/forums/topic/39386-svgdraw-window-resize-issues/ - FIXED: if you create a gsap.matchMedia() inside a gsap.context() and then revert() that Context, it may not clear out non-matching media queries (they may fire again when matching). See https://gsap.com/community/forums/topic/39481-pin-spacer-is-double-the-height-it-should-be-after-window-resize/ - FIXED: if the system clock changes backwards to an earlier time, it could cause animations to stop. See #568 - FIXED: if a flexbox child is pinned by ScrollTrigger and pinSpacing is false, flex-basis is now set to the pixel height/width of the element to avoid common layout problems. - FIXED: missing TypeScript parameter for ScrollTrigger.clearScrollMemory(). See #571 - FIXED: if you set a default stagger value via gsap.defaults(), it could cause an error in ScrollTrigger if you create one with a numeric scrub. See https://gsap.com/community/forums/topic/39600-scrolltrigger-numeric-scrub-throws-console-errors-in-gsap-core-cannot-read-properties-of-undefined-reading-totalprogress/ - FIXED: if a motionPath tween had a start or end value that wraps around and would land precisely on an anchor point that is not at the very start or end of a path, it could render incorrectly. See https://gsap.com/community/forums/topic/39594-why-are-content-1-and-content-2-overlaped-also-what-is-the-best-way-to-add-a-timeline-to-a-main-tween-or-timeline/
normal.video.mp4
在视频中2s-3s中间，出现动画抖动，代码如下
var tl = gsap.to(".box", {
keyframes:{
"0%":{scale:0.8},
"100%":{scale:1}
},
transition:{
ease: "none",
duration: 0.8,
}
});
tl.repeat(-1);
tl.yoyo(true);
The text was updated successfully, but these errors were encountered: