Jump to content
Search Community

I think I have found a bug

Ali Farooq test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Okay I'm fairly new to GSAP but I think I've found a bug. Maybe I'm using something wrong or maybe it's a bug. Whatever it is I wanted to just highlight it to the GSAP experts incase it really is a bug and not me using the animation library incorrectly.

First and foremost I should Tell you that I've tested the codepen animation on ALL major browsers. The animation works correctly on IE, Edge, Chrome, Various Mobile Browsers. The only browser that doesn't render the animation correctly is Firefox. I'm using the latest version of Firefox by the way.

Okay so the bug I'm referring to is the various "Eyes" that are following a path (I've highlighted the path for your convenience). The eyes are not following the path correctly on Firefox. What I wanted was to make the eyes appear from one mobile and go into the other mobile. This is happening on all browsers except firefox.

I apologize for the long SVG code. The two paths I'm using for this are found at the very bottom of the svg code. One path for the "dollars" and the other for the "eyes". The relevant javascript code for this is from line 1 to line 16.

Thanks!

See the Pen xLQLNW by Ali_Farooq_ (@Ali_Farooq_) on CodePen

Link to comment
Share on other sites

Hi @Ali Farooq

 

We don't need to see all your animations and graphics. A simplified demo that reproduces the issue is best.

 

That said, I only see the eyes or dollars correctly in Edge. In Firefox, the dollars are correct, the eyes are not. In Chrome, the dollars and eyes aren't visible. 

 

These lines of code look pretty suspect. 

 

TweenMax.set(dollar, {xPercent:-155, yPercent:-170});

TweenMax.set(eye, {xPercent:-870, yPercent:-900});

 

How are you getting those values? They seem rather large and arbitrary. If I comment them out, I can at least see the dollars in Chrome, although they are not aligned to the path. Still can't see the eyes in Chrome though.

 

Also, it might be better use querySelector or querySelectorAll to select your elements. Using getElementsByClassName returns a live list, and might create problems if you're not careful.

Link to comment
Share on other sites

Thanks, Blake.

 

Ali, if you still have issues after upgrading TweenMax to 1.20.2 please provide a reduced test case similar to Blake's that only has enough code and assets to clearly illustrate the issue. It seems you may have changed your original pen a bit but I see 1000 lines of SVG code, and nothings animating.

 

Its better to fork the demo and post a new revision for us to see. Let us know if you still need help after reducing the demo. Thanks

Link to comment
Share on other sites

That demo certainly changed a lot since I first looked at it. The immediate problem with the new version is it's loading TimelineMax rather than TweenMax and there is a typo in the Linear ease. Here's a corrected fork:

See the Pen yowbWg by PointC (@PointC) on CodePen

That seems to work in Chrome and Edge, but the path is off in FF. I'm with @OSUblake though - I'm not sure where those values for x/yPercent are coming from. Normally to center something and follow a path you'd want to do what Blake did and use a -50 for the x/yPercent. I didn't dig too far into the SVG to see the reasoning behind those values though.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Hi @Ali Farooq

 

I pretty sure the problem is just your SVG markup. It's in serious need of some cleanup. There's a lot of redundant stuff in it, like all these nested groups.

 

<g class="g46142">
  <g id="g46130">
    <g id="g46128">
      <g id="g46108">
        <g id="path46106">
          <use id="use4673" fill="#39B54A" transform="matrix(-0.0282279 0 -0 -0.0282279 -1766.86 -1902.92)" xlink:href="#path24_fill"/>
        </g>
      </g>
      <g id="g46116">
        <g id="path46114">
          <use id="use4677" fill="#CDFF8A" transform="matrix(-0.0282279 0 -0 -0.0282279 -1787.63 -1923.47)" xlink:href="#path25_fill"/>
        </g>
      </g>
      <g id="g46122">
        <g id="path46120">
          <use id="use4681" fill="#39B54A" transform="matrix(-0.0282279 0 -0 -0.0282279 -1890.12 -2038.52)" xlink:href="#path26_fill"/>
        </g>
      </g>
      <g id="g46126">
        <g id="path46124">
          <use id="use4685" fill="#39B54A" transform="matrix(-0.0282279 0 -0 -0.0282279 -1824.12 -1958.51)" xlink:href="#path27_fill"/>
        </g>
      </g>
    </g>
  </g>
</g>

 

That could be reduced down to something like this.

 

<g class="dollar">
  <path d="..." />
  <path d="..." />
  <path d="..." />
  <path d="..." />
</g>

 

 

It's also a good idea to get rid any transforms in your markup. What SVG editor are you using? Some editors like Inkscape and Affinity Designer have an option to flatten the transforms for you. If not, you can usually ungroup your elements to get rid of the transforms.

 

I used Illustrator to ungroup your SVG elements, and it dramatically cleaned up your code. From over 1000 lines of code, down to 150. It also got rid of all the <use> elements and flattened the transforms on a normal path element. I also removed the initial rotation on the eyes and dollars as that was throwing some of the centering off a tad.

 

Everything is working as expected in all browsers.

 

See the Pen brZRvq?editors=1010 by osublake (@osublake) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites

Hi!

Sorry for the delayed response. There were three national holidays here so I couldn't get to my laptop.

Blake thanks for your codepen. I had a similar suspicion regarding my SVG. Since my SVG animation was just a practice exercise, I didn't bother cleaning the code. Big mistake. To see if I was doing everything correctly I animated a simple svg object along a path in an another SVG and everything was working fine.

Regarding those values for "xPercent/yPercent", I obtained them by doing "trial and error" approach. I kept on changing values until the objects perfectly started following the correct path. After many attempts I was able to get the dollars and eyes working. Yes that's a bad method. That's why these values looked so abrupt.

I do have one question. I'm animating 8 elements that are in constant animating state. They rely only on "transforms" for their animations e.g transitions, rotations etc. I've read that using transforms is efficient. But in my case they are slowing the browser on some older mobile devices. Is their any way besides keeping the SVG code clean and concise, using transforms to help run the animation smoothly? Am I just animating too many elements at once and it's slowing the browsers on some older devices? I know that GSAP is highly efficient (I've seen benchmark scores and compared with other libraries) but maybe I'm writing the code in an inefficient way?

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
On 9/5/2017 at 1:00 PM, Ali Farooq said:

Regarding those values for "xPercent/yPercent", I obtained them by doing "trial and error" approach. I kept on changing values until the objects perfectly started following the correct path. After many attempts I was able to get the dollars and eyes working. Yes that's a bad method. That's why these values looked so abrupt.

 

That's what I figured. We've all been down that road before. Sometimes using brute force is the only way to get something to look right when you can't make sense of something.

 

On 9/5/2017 at 1:00 PM, Ali Farooq said:

I do have one question. I'm animating 8 elements that are in constant animating state. They rely only on "transforms" for their animations e.g transitions, rotations etc. I've read that using transforms is efficient. But in my case they are slowing the browser on some older mobile devices. Is their any way besides keeping the SVG code clean and concise, using transforms to help run the animation smoothly? Am I just animating too many elements at once and it's slowing the browsers on some older devices? I know that GSAP is highly efficient (I've seen benchmark scores and compared with other libraries) but maybe I'm writing the code in an inefficient way?

 

Can you provide a demo of that? Transforms are usually faster as the browser can just move the graphic around instead redrawing it on every frame. But it's really hard to say why it might be slow without seeing it. Some older mobile devices just might not be able to handle the animation. SVGs are typically the slowest things to animate in a browser.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...