Ali Farooq

ShockinglyGreen
  • Content count

    8
  • Joined

  • Last visited

Community Reputation

6 Newbie

About Ali Farooq

  • Rank
    Newbie
  • Birthday 08/15/1993

Contact Methods

  • Skype
    alifarooq0072

Profile Information

  • Gender
    Male
  • Location
    Pakistan
  • Interests
    Video Games, Travelling.
  1. Unexpected SVG behavior on IE/Edge

    Thanks guys! didn't know about the svg origin property. This will definitely get me on the right track.
  2. Unexpected SVG behavior on IE/Edge

    Hello! I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock. Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock. Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.
  3. I think I have found a bug

    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?
  4. I think I have found a bug

    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!
  5. Transfrom Rotate 360 Glitch

    Nice! I didn't take into account the slight rotation being applied and how it would affect the gear animation. Thanks a bunch!
  6. Transfrom Rotate 360 Glitch

    Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
  7. Hi All, I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them. Here's the link to my codepen demo: The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back and opacity animate from 0 to 1 ONLY when I reach the top of my page while scrolling back. I've tried to do that by using "triggerHook" method as you can see in my pen but sadly I've failed. I've also searched all over the internet for answers but all in vain. I was hoping if someone could help me in this regard. I'm not an expert in javascript and would really appreciate any tips or help. Thanks in advance! Ali
  8. Looping a tween

    Sorry for bumping an old thread but I was searching for a way to indefinitely repeat a rotation animation using TweenLite. When I use the function stated above I get syntax error "Uncaught SyntaxError: Unexpected token :" I realize that maybe the plugin syntax has changed over the past 6 years. Is there another way in TweenLite to infinitely continue an animation? Due to size constraints I can't use TweenMax for this. Thanks!