Jump to content

elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by elegantseagulls

  1. 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/

    • Like 3
  2. @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. 



    • Like 1
  3. 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:



    with the Require, I need to add SplitText as an exception in the globals of the .eslintrc file.


    Hope this helps!

    • Like 1
  4. 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

    • Like 1
  5. 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()`.



    • Like 3
  6. 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});
      .to("#whiteCube", 2, {rotation:360})
      .to("#whiteCube", 2, {rotation:1440})
      .to("#whiteCube", 2, {rotation:1800});
    $('#whiteCube').on('click', function(){


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

    • Like 7
  7. 57 minutes ago, elegantseagulls said:



    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.

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

    • Like 3
  9. 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.

    • Like 4
  10. 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:





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

  11. @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.

    • Like 2
  12. @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])/ 



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

    • Like 3
  14. 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