Jump to content

elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!

Community Reputation

159 Specialist

About elegantseagulls

  • Rank
    Advanced Member

Contact Methods

Recent Profile Visitors

1,226 profile views
  1. @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.
  2. @Exhumator GSAP has a utility for that : https://greensock.com/docs/Utilities/SplitText
  3. @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.
  4. @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])/
  5. 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>.
  6. 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
  7. 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
  8. @kevmon I'm thinking you'll either need to take the approach I took with eases, or have the Sun be contained in the SVG. Another solution to provide more true-to-path accuracy would be to use the CustomEase plugin. This uses your SunPath to create the ease, and I'm using relative units to ensure it traverses the viewport: That said, I haven't had my morning coffee, so someone may have a better solution using your current setup.
  9. You can also get a similar path effect using two different SlowMo eases:
  10. Hey All Who Provided Assistance With This, Just wanted to share the final product: https://www.audible.com/about/ That's all! Oh, and thanks for the amazing support here!
  11. Have you tried breaking the animation down into simple parts to see where the issue is stemming from? You're getting a bunch of console warnings with the floating hearts. I'd try disabling that to see if the issue is with your drawSVG or your hearts. My hunch is that its due to animating `attr: { x: x, y: y },` instead of using a transform `x:x` (which can be passed to the GPU). If you turn chrome's paint flashing borders on there's a lot of random extra paints on these hearts..
  12. I see a few things that may help. It looks like you're setting a new current slide on the click event, so when you click rapidly, the animation is resetting to the new current slide. To help this, you may want to set the current slide index via `onComplete`. There's also a jump on your next slide animations; they are less noticeable just due to how the 'left' property works. To further eliminate these 'jumps' in both directions you'll want to set the fromTo values based on the slide's current (when arrow is clicked) position. Also, from a performance standpoint, consider use 'x' (transform) over 'left', this will allow for smoother animations. This article does a great job explaining the why: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 Hope this helps.
  13. @noineter If you're looking for resources on GSAP, there's a ton, and the docs are very detailed, too: https://greensock.com/docs https://greensock.com/learning https://ihatetomatoes.net/get-greensock-101/ https://frontendmasters.com/courses/svg-animation/ Or just spend a few hours on this forum. There's a wealth of knowledge and passion for helping here that I've not seen for any other web development tool.
  14. @Shaun Gorneau is correct. If you need more resources: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange On a side note: you've got some really nice effects happening on that site. Would love to see it when it's all done!
  15. Hi @Radizzt, The logo is positioned statically. You need to add position: relative, or position: absolute for the left property to work. That said, animating 'x' is more performant then animating 'left', as it uses transforms which can animate on sub-pixels and can be passed to gpu.