Search the Community
Showing results for tags 'flicker'.
Found 8 results
-
Hello, after Chrome last update, my code doesn't work anymore. Video is flickering on scroll. I activated controls on video to check the correct animation of GSAP and all seems to be good but video doesn't follow scroll correctly and needs seconds to align with the scroll position. Video is encoded correctly and since 5/6 day ago, it worked correctly an all devices and browsers. On Safari, for example, it works correctly. It seems that the problem is related to Chrome on Mac. Does anyone have a suggestion? Thanks so much. Here's the code to play video on scrub. //GESTISCO IL PLAY/PAUSE DEL VIDEO SECONDO LO SCROLL let video = document.querySelector('#thevideo'); let sections = document.querySelectorAll('.gsap--section'); /* Make sure the video is 'activated' on iOS */ function once(el, event, fn, opts) { var onceFn = function (e) { el.removeEventListener(event, onceFn); fn.apply(this, arguments); }; el.addEventListener(event, onceFn, opts); return onceFn; } video.play(); // must call .play() first, otherwise it won't trigger things to be scrubbable (weird) video.pause(); var containerH = $(".gsap--outer").outerHeight(); //TIMELINE const videoTl = gsap.timeline({ scrollTrigger: { scroller: '.inner-site', pinType: 'fixed', anticipatePin: 1, trigger: ".gsap-pincontainer", start: "top top", end: "+=" + (100 * sections.length) + "%", pin: true, scrub: 2, // markers: true, } }); videoTl.to( video, { currentTime: 14, }); videoTl.to(".gsap--outer", { y: -(containerH - innerHeight), //100% - altezza del col-span }, "<"); }
-
Hi! We're building a site where different sections gets pinned as you scroll down. ScrollTrigger is really great for this and has saved us a lot of dev time so far. We've run in to an issue where the bottom part of a section flickers when it gets pinned. I've modified an example codepen to recreate the issue, you might need to try a few times to recreate it as it's not happing every time. We get it consequently on our site with latest chrome and on iOS. Here's a video of the flicker, check the bottom part at 2 secs when the red section is pinned: https://www.youtube.com/watch?v=iOQWNadW8BI Anyone who's run in to this? Thanks
- 7 replies
-
- 1
-
-
- scrolltrigger
- pinned
- (and 1 more)
-
Chrome flickering issue that "will-change:opacity" doesn't solve
sashaikevich posted a topic in GSAP
As my animation runs, and the layers transition through their x, y, z rotations and font size (which does something fun with the perspective) I"m getting this weird flicker in Chrome that I've noticed in the last 24 hours. I've learned here, that flickering might be a chrome bug, but the "will-change" fix didn't do it for me there. Is there anything else you guys can think of for me to try? I set up a demo of just the problematic component, but the flickering isn't there 100% of the time: https://codepen.io/sashaikevich/pen/poymMvK?editors=0010 -
I am dealing with a bug that seems be present only on Microsoft Edge < 15. Someone here know how resolve it or what is causing this? Chrome, Safari, Firefox, IE 11. Edge < 15 Here is the code for the animations. function scaleAndShrinkAnimation($element, maxWidthPercentage, durationSeconds) { var widthHalf = maxWidthPercentage / 2; return TweenMax.to($element, durationSeconds, { width: maxWidthPercentage + '%', top: '-=' + widthHalf + '%', left: '-=' + widthHalf + '%', repeat: 1, yoyo: true }); }
-
There seems to be a slight flicker once the animation is finished. This only seems to happen with HTML Videos. I was unable to reproduce the effect with other elements such as divs or imgs. Has anyone come across this issue before?
-
Hello, I'm animating a spritesheet which works fine except I'm getting quick flicker when the animation starts. I've set up a codepen for review. Any ideas would be helpful - thanks!
-
Hi! So, here's the link http://goncalo.eu/movies The idea is to create a realistic film projection experience. I'm playing with the opacity of the black overlay, but doesn't feel real. Far from it. Currently, i'm doing this: var tlOpacity = new TimelineMax({repeat: -1, yoyo: true}); tlOpacity .to(".overlay", 3, { opacity: 0.7, scale: 0.95, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 0.5, points: 50, taper: "none", randomize: true, clamp: false}) }) .to(".overlay", 3, { opacity: 0.8, scale: 1, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 0.5, points: 50, taper: "none", randomize: true, clamp: false}) }); I've tried several other alternatives, trying to oscillate the opacity value, but with no success. So, I'm trying the GSAP boards for some counselling. Do you have a better idea on how to proceed? Thanks in advance!
-
Chrome isn't very happy with my transition-rich page. When the site is rendered in a large window (>= 1080p maximized) and transitions are initiated, one or more elements temporarily disappear. DEMO (this is early-dev -- layout is far from complete, so please ignore the scaffolding) I've been poring over stackOverflow and the like for possible solutions, but I've yet to run across anyone with this issue. Any clues would be greatly appreciated.
