Search the Community

Hi All, I am trying to fix a rendering/scaling issue with the Safari browser where once I hover over an object and it scales, the text and the background colour where the text scales is very blurry and pixelated. It works fine with Google Chrome. Safari version: Version 17.1 I tried the below solutions but it didn't work for me: - https://gsap.com/community/forums/topic/30156-safari-v15-rendering-bug/ - https://gsap.com/community/forums/topic/25758-scaled-up-text-in-safari-is-blurry/

Here's an example: https://codepen.io/helleholmsen/pen/abXvvQq Is there any known fix for this?

Hi All, I have a problem with GSAP ScrollTrigger onLeave function. First, I want the GSAP animation play only one time when scroll down, and not to replay animation when scroll back up. So I use onLeave function to disable the animation play again, and refresh ScrollTrigger to reset it. It works fine on Chrome, but on Safari and Safari Mobile(iOS) it flashes towards the end of each one of the animations in the timeline. I have no idea how to fix it on safari. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate. (※And I find out that when the animations timeline group amount is more, the flashing problem is more serious. ) This is my demo codepen： https://codepen.io/joanna_0705/pen/NWEoPrK

Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.

Hey guys! I just wanna show that we are having some rendering issues with ScrollSmoother in Safari browser, so I will leave here 2 videos to show the difference between Safari and Chrome. I would like to know if you have any workaround for that. Safari: Safari.mp4 Chrome: Chrome.mp4 Thanks so much!

Well... I dont know if it's really draggable the cause, but that's the last thing I added on this page and before it wasn't having any problem actually. At the very end ~ 0:29: you can see the page crashing and reloading. It's actually impossible to replicate the issue on Codepen, as it'd mean replicate the whole page.. I guess it'd be too much useless content to view a single section's problem. Following an old thread with @OSUblake I did added the CSS attribute will-change to some elements that ... well... "will-change" with scrolltrigger (?lol) .. but the issue is still there. How to replicate the issue: 1) Unlock the page: https://www.whynot.media/unlock, then just to to https://www.whynot.media/su-di-noi/ till the GSAP carousel, then scroll somewhere. This is the code on that page, and below you can see the video that shows the problem. /***su di noi***/ function _funzioni_su_di_noi(){ if(body_class.contains("pagina-su-di-noi")){ function img_grid() { let griglia_ipads = document.querySelector('.contenitore-griglia-ipad'); if(griglia_ipads){ gsap.fromTo(griglia_ipads, { scale: 5, transformOrigin:"center", }, { transformOrigin:"center 60%", scale: .3, stagger: .5, scrollTrigger: { trigger: griglia_ipads, start: "top 110%", end: () => innerHeight * 6, scrub: true, } }); gsap.set(".contenuto-ipad:not(.centerBlock)", {autoAlpha: 1}) gsap.to(".contenuto-ipad:not(.centerBlock)", {duration: 0.1, autoAlpha: 1}, 0.001) // Images to make it look better, not related to the effect const size = Math.max(innerWidth, innerHeight); gsap.set('.contenuto-ipad', {backgroundImage: i => `url(//picsum.photos/${size}/${size}?random=${i})`}); const bigImg = new Image; bigImg.addEventListener("load", function () { gsap.to(".centerPiece .contenuto-ipad", {autoAlpha: 1, duration: 0.5}); }); bigImg.src = `//picsum.photos/${size}/${size}?random=50`; } } img_grid(); /*horiz scroll sections4*/ async function horiz_scroll_sections(){ let snapX,slideDelay=4,slideDuration=.3,slides=document.querySelectorAll(".slide"),prevButton=document.querySelector("#prevButton"),nextButton=document.querySelector("#nextButton"),progressWrap=gsap.utils.wrap(0,1),numSlides=slides.length;gsap.set(slides,{backgroundColor:"random([red, blue, limegreen, dodgerblue, orange, goldenrod, lime, black])",xPercent:a=>100*a});let wrap=gsap.utils.wrap(-100,100*(numSlides-1)),animation=gsap.timeline({repeat:-1});animation.to(slides,{xPercent:"-="+100*numSlides,duration:numSlides,ease:"none",modifiers:{xPercent:wrap}},0),animation.to(".slide span",{rotate:360,ease:"none",stagger:{amount:numSlides-1}},0),animation.pause(),setupDraggable();function setupDraggable(){function a(){f.kill(),this.update()}function b(a){f.kill();let b=snapX(gsap.getProperty(e,"x")+a*-g);f=gsap.to(e,{x:b,duration:slideDuration,onUpdate:c})} function c(){/*console.log(gsap.getProperty(e,"x")/-h,"wrapped",progressWrap(gsap.getProperty(e,"x")/-h)),*/animation.progress(progressWrap(gsap.getProperty(e,"x")/-h))}function d(){let a=gsap.getProperty(e,"x")/h||0;g=slides[0].offsetWidth,h=g*numSlides,snapX=snapDirectional(g),gsap.set(e,{x:a*h}),b(0),f.progress(1)}let e=document.createElement("div"),f=gsap.to({},{}),g=0,h=0;d();let i=new Draggable(e,{type:"x",trigger:".slides-container",inertia:!0,maxDuration:.75,minDuration:.1,minimumMovement:45,onPress:a,onDrag:c,onThrowUpdate:c,allowContextMenu:!0,allowNativeTouchScrolling:!0,snap:{x:a=>snapX(a,0>i.deltaX?-1:1)}});window.addEventListener("resize",d),document.querySelector("#prevButton").addEventListener("click",()=>b(-1)),document.querySelector("#nextButton").addEventListener("click",()=>b(1))}function snapDirectional(a){let b=gsap.utils.snap(a);return(c,d,e=1e-3)=>{let f=b(c);return!d||Math.abs(f-c)<e||0>f-c==0>d?f:b(0>d?c-a:c+a)}}; function dx_sx(){let e=document.querySelector(".hero-caption"),t=document.querySelector(".drag-carousel");e.addEventListener("touchstart",(function(n){let a=n.changedTouches[0].pageX;e.addEventListener("touchend",(function(e){let n=e.changedTouches[0].pageX;a<n?(t.classList.remove("mancino"),t.classList.add("destro")):(t.classList.add("mancino"),t.classList.remove("destro"))}),!1)}),!1)}dx_sx(); } horiz_scroll_sections(); }//su di noi } _funzioni_su_di_noi(); What can I do? Thanks

Anyone have a fix for blurry text in Safari when it scales up? Safari does the same thing to SVGs but I found if I slightly change the rotation with an onUpdate that fixes the issue. SOLVED - see my post below.

Hey, First time posting so hope i'm making myself clear and not breaking any rules :). But i have no idea what i could be doing wrong (yet). Been working on a banner ad in which masked svg elements are animated: No trouble with Chrome or Firefox. But when i rotate a div element with an masked svg inside it, the mask takes a bigger size in Safari. I've added an event listener to not have to refresh every time to see my precious yoghurt rotate ;) Can anyone point me in the right direction what could be a solution? Not sure if this is Greensock related, if not, i'll show myself out :). Thanks anyway!

I'm trying to find a fix for an older version of Safari. I have some elements animating in div that I've made into a circle using border radius with an overflow hidden. It works great on the latest browsers, but in older versions of Safari the element 'breaks' out of of the div when it's animating. I've read adding a border setting to container will fix it, but it's not working when I test in Safari 7.1.4. I know this is browser but and not a GSAP issue. I'm wondering if anyone has found a good fix for this Safari issue. On the plus side it works great in IE9 the overflow animating that is ... not codepen ;-P http://codepen.io/kaplan/pen/ojmbRm Thanks!