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:

See the Pen bJpGog by elegantseagulls (@elegantseagulls) on CodePen

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: 

See the Pen wVMXYG by elegantseagulls (@elegantseagulls) on CodePen

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 ?

See the Pen XvmYwy by elegantseagulls (@elegantseagulls) on CodePen

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).

57 minutes ago, elegantseagulls said:

Hey,

 

I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients.

 

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.

See the Pen Oovbob by elegantseagulls (@elegantseagulls) on CodePen

@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:

Thanks!

See the Pen OYYKON?editors=1010 by elegantseagulls (@elegantseagulls) on CodePen

@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:

See the Pen pmjwYg by elegantseagulls (@elegantseagulls) on CodePen

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?

See the Pen bJpGog by elegantseagulls (@elegantseagulls) on CodePen

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:

See the Pen bJpGog by elegantseagulls (@elegantseagulls) on CodePen