Jump to content


Slight glitch at the start of animation

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

Hi Guys,


I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. 


I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from?


Note that it doesn't work in IE at all!




See the Pen RPmXgb by padders1980 (@padders1980) on CodePen

  • Like 2
Link to comment
Share on other sites

Wow, that's really incredible. Amazing performance in Chrome. 

I found that Safari ignores the filters and FireFox tries, but really struggles.




I couldn't see the glitch. All I noticed is that the browser's scrollbars seem to collapse and expand quickly at the beginning. You can probably get around that by adding some overflow:hidden to the body or something. 


Can you explain the glitch better?


To make testing these things easier I suggest disabling the Auto Update feature so that you have a "run" button to restart the pen whenever you want (as opposed to when the code changes)


When viewing the pen go to settings > behavior > de-select Auto Update Preview

  • Like 3
Link to comment
Share on other sites

Yeah, I was surprised at how smooth it is in Chrome, Opera isn't bad either. I've added overflow: hidden on the body now, which stops the scrollbars appearing but I still get the glitch. It seems to happen more when the window is fullscreen but with the editor still showing (so in editor mode, not fullscreen mode). Might only be appearing at certain browser sizes?


The glitch itself is a brief appearance of the warped text on the left, it's just a frame or two, but it's quite apparent when it's there. I've attached a screenshot of what I see!


It looks like I've got something misplaced somewhere so it appears just before the animation starts?


Link to comment
Share on other sites

hmm, your attachment did not go through it seems.

I've resized Chrome (on a Mac) in editor mode large, small, various aspect ratios and it looks flawless. 

I'm a bit stumped. 


My only guess is that the the .hero element is rendering before the JS kicks in and sets the rotationX of trippy to 90.

In this fork I set .hero's visibility to hidden in the css and turn it back on when the js executes: 




Any better?


This technique of animating svg filters on a regular DOM node is insane. Great job!

  • Like 2
Link to comment
Share on other sites

@padders, this is friggin awesome! That's it, I have nothing to contribute ... just to say I love this!

  • Like 2
Link to comment
Share on other sites

Ha, I can't really take credit Shaun, it's forked from 2 other pens :) it is cool though. (I linked to the originals in the description of the pen, take a peek)


yeah I noticed my attachment hadn't uploaded, I've sent it again. I still get the glitch in your fork though Carl. I wonder if my graphics card drivers are doing something funny...

  • Like 1
Link to comment
Share on other sites

Ok, I seem to have minimised the effect now, it's not fixed totally but by setting the opacity to 0 at the start you don't really see it. 


If you get rid of all the JS apart from the following, you can see the glitch clearly on mine! I guess it's just the displacement map and the text at the start.

var textBox = $(".trippy"),
    turbulence = $("feTurbulence"),
    displacement = $("feDisplacementMap"),

CSSPlugin.defaultTransformPerspective = 600;
TweenLite.set(textBox, {rotationY:90});
Link to comment
Share on other sites

Oh, and one last interesting thing! You need to use 3d transforms to get any kind of performance. if you need to move things left/right etc, then use matrix3d :)

Link to comment
Share on other sites

Great Job padders! Looks awesome :)


I believe to get it to work in IE, you need to use inline SVG filter attribute and use a SVG text tag, since Legacy DX Filters removed from IE10 and above


It animates with GSAP the SVG feTurbulence baseFrequency property with the AttrPlugin


Just to throw my two cents in the mix.. Here is a quick and dirty example that also works in IE10 and above..


See the Pen NqZPwd by jonathan (@jonathan) on CodePen


It's not as complex as your example, but just shows those filters are possible in IE. Sometimes IE needs to be forced into submission, to play nice.



  • Like 2
Link to comment
Share on other sites

Dude that's great, even works in Safari (which throws a fit with mine).


Might have a play with that tomorrow :)

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.