elegantseagulls

@PointC - I've lost count at how many times I've gotten the notification that you've posted the solution literally moments before I hit the 'Submit Reply' button!

Hi @Fakebook The issue is with the way some browsers display fonts. The issue you're talking about was discussed in some pretty good detail here: Here's a link to my pen with the closest solution: https://codepen.io/elegantseagulls/pen/bJpGog The CSS you'll need is: font-kerning: none;

OK. The site is finally live, and I'm really excited about how the animations turned out on it: Especially the Logo hover, mobile hamburger toggle, and (very related to this thread) the heading animations. Hope you all like it, and thanks again for the assist in debuggin the SplitText issues in Safari. Here's the site: https://wavesforwater.org/

@Luckyde We're using the files from 'bonus-files-for-npm-users > umd` Also, TimelineMax isn't referenced in this CustomEase.js, so I have a feeling your error may be coming from somewhere else. Also, to elaborate on my first reply a bit: The important reason for not putting the file in the node_modules dir is that these files won't be referenced in the package.json file, so if someone were trying to work with your environment from a new machine (assuming your node_modules is in .gitignore as it should be), those files wouldn't be available to yarn/npm install etc.

Hi @Luckyde With our projects, we have a plugins directory that we import from as such: import CustomEase from './../static/plugins/CustomEase'; As far as using Require, I've found that I had to do so when using GSAP's premium products (SplitText, etc), which I access in a similar manner: require('../../static/plugins/SplitText.js'); with the Require, I need to add SplitText as an exception in the globals of the .eslintrc file. Hope this helps!

@PointC Amazing! You're a hero! Always blown away by the support on these Forums, and the willingness to help on even non-gsap related issues. Tweaked it slightly to eliminate the hard line on top: https://codepen.io/elegantseagulls/pen/wVMXYG

So trying to work around an issue/bug in Chrome (latest version only as far as I can tell) where it only looks at an initial value of SVG Blur Filters (specifically, in this case, the stdDeviation attr). I understand that animating defs can cause some very mixed results, but I can't think of a good alternative (aside from Canvas/GL) I have a solution that works, but it seems really hacky (un-comment lines 8-15). Can anyone think of a better solution ? https://codepen.io/elegantseagulls/pen/XvmYwy

There's more good information on `.reversed()` here:

Hi @Jiri It's because your code is using the conditional `menuAnimation.reversed() ? menuAnimation.play() : menuAnimationBack.reverse()` Which plays fine the first time, because `menuAnimation.reversed()` is true, and when that animation is run it sets to false, which, then, isn't reset back to true by your `menuAnimationBack.reverse()`.

Hi @Demky Welcome to the GSAP forums! The issue you're seeing is because all of your Tweens are trying to run at the same time (using TweenMax). From what I see you'd be best using a Timeline (Max or Lite): see docs here: https://greensock.com/docs/TimelineLite var tl = new TimelineMax({paused: true}); tl .to("#whiteCube", 2, {rotation:360}) .to("#whiteCube", 2, {rotation:1440}) .to("#whiteCube", 2, {rotation:1800}); $('#whiteCube').on('click', function(){ tl.play(0); }); You'll want to note that the rotation values are all relative to 0 (not current rotation), so that's why I'm ending on 1080deg (1800 - 1440 = 360). Alternatively, you could set it to make the rotation add x degrees to the current value (by setting a var for current rotation and adding to that, etc).

Also, could be useful and reasonably easy to integrate SplitText into it for multi-line text blocks.

Hey, I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients. https://codepen.io/elegantseagulls/pen/Oovbob

@danboyle8637, Glad that worked! Yes, it's definitely a good idea to kill animations (and scrollMagic scenes) on componentWillUnmount, otherwise you can get some bad bloat and/or unexpected results.

Is the error only in the console, or is it breaking the page? Since you're seeing this when you navigate away from the page, you might want to try to kill your tweens and destroy your ScrollMagic scenes on componentWillUnmount(). My guess is that this will fix that error.

@Fakebook, I think your best bet would be to add a throttle function inside your `update` function (rather than trying to throttle GSAP's built in onUpdate or tick). If you're just going for the visual effect, @Visual-Q's solution is money!