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!

When I open the console in FireFox I am seeing `TypeError: a is undefined` In Chrome I see: `TweenMax is not defined` To me this looks it's an issue with your overall JS setup rather than the code you're using to animate. You have some of the JS Loading from the server and some inline. I'd bet the inline JS is looking for GSAP before it loads from the server. May want to delay your inline JS until the page is loaded/ready. Another note: TimelineMax is included with TweenMax, so you don't need to import both. Also, you're loading a lot of JS files (more than 15). You'll likely see a performance hit with this.

@GreenSock Thank you so much! Been finding certain browsers' limits of performantly tweening SVGs a lot quicker these days it seems, so this is very helpful!

Hey fellow GSAP friends, Having some inconsistency issues, and I'm not sure where they are stemming from when trying to use morphSVG in canvas. I've looked at @OSUblake, example, but even with his implementation cannot figure out what's up. I'm tweening the path as a variable object rather than a dom element. I imagine that's what's causing the issue, but why? See codepen: https://codepen.io/elegantseagulls/pen/OYYKON?editors=1010 Thanks!

@GreenSock Aaaaaahhhh yeah, I remember reading that now...it's why I bailed on using 'lines' the first time (it's been a big, long, exciting project). Then I failed to recheck the docs, after noticing the 'lines' issue after your suggestion to use 'lines'. Aaany how, all good now! I'll share the site here once it's live.

@Exhumator GSAP has a utility for that : https://greensock.com/docs/Utilities/SplitText

@GreenSock @Shaun Gorneau Initial testing confirmed, once I targeted this.targetRef.current.children (instead of this.targetRef.current), splitting based on 'lines' worked, and solved the issue for me.

@GreenSock That's putting me in the right direction (I hope), though I've found an interesting bug in the process: If I target a heading tag's parent, and the max-width is dictated by the heading's grandparent, 'lines' isn't working—it just wraps the entire heading tag. See CodePen: https://codepen.io/elegantseagulls/pen/pmjwYg Using 'lines' was my hunch to help my text-jumping issue, but I didn't see that it wasn't working as expected. I'm using this animation as a component in React, which was my reasoning for targeting the parent (it's unknown what the child's tag may be [<h1>, <h2>, < p>, etc])/

I'm not seeing any issues in Firefox on Mac osX, however, I've noticed on other sites that animate large SVGs have some issues in FF (and especially Safari). This is, I believe, because animating SVG components (<path>, etc) cannot take advantage of hardware acceleration. Your best bet, if you keep running into issues, might be to rebuild your graphics/animation using <canvas>.

I'm having an issue on Safari (desktop and mobile) when I have a line-break (due to responsive or otherwise) with centered text in a split-text animation. The animation runs, but on mySplit.revert() there's a noticeable jump. I was able to resolve the issue in FireFox and Chrome by adding font-kerning: none, but cannot figure out a fix for the centered text bug in Safari. Any ideas? https://codepen.io/elegantseagulls/pen/bJpGog

font-kerning: none; Was just about to post about this. Certain fonts seem to be a bit of a problem. Check out this Pen with and without the font-kerning: https://codepen.io/elegantseagulls/pen/bJpGog