Scaling a circle with width and height set to "1" to a larger extent causes Flickering/blinking effect.

[Amna A]

Hello!

Here is the CodePen link to my code:  

I am attempting to scale a circle with a width and height set to "1" to a larger extent (2000). However, I am encountering a significant flickering issue on screen resolutions of 1500 and above. The flickering occurs less frequently on a 1440 screen resolution.

Additionally, I'm facing challenges with the scaling functionality on Safari, Firefox, and Edge. On Safari, the circle scales into a square, and on Firefox and Edge, the entire SVG disappears.

The idea is to scale the circle on the scroll so that it can fill the whole screen.

I am new to GSAP, and I know it must be a simple mistake, but I would greatly appreciate any insights or suggestions on how to address these issues!

See the Pen gOEvQjj by aamnaa (@aamnaa) on CodePen

[Amna A]

I am new to GSAP, and I know it must be a simple mistake, but I would greatly appreciate any insights or suggestions on how to address these issues!

[mvaneijgen]

Hi @Amna A welcome to the forum!

 

How I like to think of scale is that it has a max value and a min value where 0 is the min and the max is 1. Scaling to a value of 2000 is really hard for the browser, so what will be easier is if you create the element as big as you want it to be when it is done animating and then scale it .from() 0 (GSAP is smart and if you use .from() it will animate to the initial value in this case 1 is the browsers default) 

 

Are you maybe trying to fill the screen witha circle?  Check out our own @Carl's tutorial which shows you how you can do this with some magic math values! Hope it helps and happy tweening! 

 

 

See the Pen YzgedWO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Amna A]

1 hour ago, mvaneijgen said:

Hi @Amna A welcome to the forum!

 

How I like to think of scale is that it has a max value and a min value where 0 is the min and the max is 1. Scaling to a value of 2000 is really hard for the browser, so what will be easier is if you create the element as big as you want it to be when it is done animating and then scale it .from() 0 (GSAP is smart and if you use .from() it will animate to the initial value in this case 1 is the browsers default) 

 

Are you maybe trying to fill the screen witha circle?  Check out our own @Carl's tutorial which shows you how you can do this with some magic math values! Hope it helps and happy tweening! 

 

 

 

 

Hello @mvaneijgen
 
I followed @Carl's tutorial and it fixed my issue. Thank you so much for helping out.

[Amna A]

Hello again!

I am using gsap ScrollSmoother with nextJS app. Here is my code for layout component where I am initiating ScrollSmoother.

const Layout = ({ mainMenu, children }: Props): React.ReactElement => {

  gsap.registerPlugin(ScrollSmoother, ScrollTrigger);

  ScrollTrigger.normalizeScroll(true);

  useIsomorphicLayoutEffect(() => {

    const smoother = ScrollSmoother.create({

      smooth: 3,

      effects: true,

      smoothTouch: 0.1,

      normalizeScroll: true,

    });

    return () => {

      smoother.kill();

    };

  }, []);



It works fine on Chrome but on Safari I am getting the following error:
Can anyone please guide How can I fix this issue?

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Amna A]

19 hours ago, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

 

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Thank you for suggesting recreating the issue, I found it and fixed it during the process. 

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[Amna A]

On 1/31/2024 at 5:12 PM, Amna A said:

Hello @mvaneijgen
 
I followed @Carl's tutorial and it fixed my issue. Thank you so much for helping out.

Hello again!

 

I wanted to share an update on the method I've been using based on the tutorial we discussed earlier. Instead of scaling an SVG directly, I opted to use a div element initially. I set its width and height to the desired dimensions and applied a transformed scale to make it effectively invisible (scale set to 0). Then, I implemented a scroll-triggered animation to scale it up to 1 as the user scrolls.

Now, here's the catch: while this approach works smoothly on Chrome, I encountered some unexpected behavior on Safari. When testing on Safari, the entire element seems to disappear entirely. Additionally, when scrolling out of the viewport, the element suddenly reappears, filling the entire screen abruptly.
 

Here is the link to my Codepen: 

See the Pen jOJXMZw by aamnaa (@aamnaa) on CodePen

 

Let me know if you have any insights or if you'd like me to try any specific troubleshooting steps! Thank you in advance!

[mvaneijgen]

Your pen was not working, I don't know what I did but I moved a lot of code around and removed most of the installed plugins in de JS panel and just loaded GSAP and ScrollTrigger and everything works perfectly smooth on Safari version 17.2.1. Any particular Safari version device?

 

When working with GSAP/ScrollTrigger CSS is really important, the issue with tools like tailwind is that it add a lot of CSS without you knowing. I would recommend that if you encounter a bug, just disable tailwinds for a moment and see if the issue is still there. 

 

See the Pen GRLRzgW?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Amna A]

2 hours ago, mvaneijgen said:

Your pen was not working, I don't know what I did but I moved a lot of code around and removed most of the installed plugins in de JS panel and just loaded GSAP and ScrollTrigger and everything works perfectly smooth on Safari version 17.2.1. Any particular Safari version device?

 

When working with GSAP/ScrollTrigger CSS is really important, the issue with tools like tailwind is that it add a lot of CSS without you knowing. I would recommend that if you encounter a bug, just disable tailwinds for a moment and see if the issue is still there. 

 

 

 

Thank you for the suggestion. I checked it out, but the issue persists. When you refresh the site, the animation works abruptly but after 3 to 5 seconds, it works perfectly fine. I am unable to troubleshoot the cause here.

[Rodrigo]

Hi,

 

I just checked both yours and Mitchel's demos and can't replicate the issue you're referring to. Unfortunately I we can't see a minimal demo that clearly illustrates the problem there is not much we can do.

 

If is not happening in codepen that means that something else in your setup is causing this, so you should check other parts of your project and see if removing them makes a difference.

 

Happy Tweening!