Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

bdrtsky last won the day on March 15 2021

bdrtsky had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by bdrtsky

  1. Yes, this is super helpful, thank you @Dipscom I will play with original anime.js animation more, to understand each step. From what I can see right now, it is animating from z 0, to z 8 ( 8 = 0*8 + 8) (and this is only the `from` part), and then to z index*20 + 20 and at the end of `to` it resets to 0 again! Am I getting this right, to solve this with GSAP I will need Timeline with at least 3 animations instead of one simple animation (without timeline) with anime.js? 1. from 0 to z 0, to z 8 ( 8 = 0*8 + 8) 2. from z 8 ( 8 = 0*8 + 8) to index*20 + 20 3. from index*20 + 20 to 0
  2. Hello, guys. Trying to port beautiful anime.js effect to GSAP and have troubles. The effect itself is here (the first one) - https://tympanus.net/Development/StackMotionHoverEffects/ The code is here - https://github.com/codrops/StackMotionHoverEffects/blob/master/js/main.js#L63 I made a Codepen to show my issue - The anime.js code have this piece translateZ: [ { value: function(target, index) { return index*8 + 8; }, duration: 200 , easing: [0.42,0,1,1] }, { value: function(target, index) { return index*20 + 20; }, duration: 700, easing: [0.2,1,0.3,1] } ] This is fromTo values. But GSAP doesn't have API to set from and to duration and easing separately, right? What should I do then? And I don'treally can't image how this separate values are applied. Any ideas how this work, on what stage? Why my animation have initial jerking? Why my elements doesn't moves up? How to port it properly?
  3. Take a look at this - https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/ Pure SVG filters. I believe this is maximum that you can get from SVG. But, to tell the truth effect is not so smooth as with WebGL, and it makes my CPU fry. I wouldn't use it in production.
  4. I appreciate your answers, since I already wanted to add event listener to every child This is much much more elegant solution, very enlightening. I should probably take advice above to spend more time on forum
  5. Cool, thanks! Still I was hoping there could be a way automagically solve this, for the case, where I can't edit data attributes...
  6. I want to start stagger from element under cursor. This doesn't seems to work
  7. Why origin have no effect on this SVG and why findMorphOrigin doesn't work?
  8. Pretty sure here I have same anchor amount on S (26 points), but still have weirdness
  9. @GreenSock yes, this is looking exactly what I need to achieve! Thanks for pointing in right direction. I am trying now figure out what exactly one point you were talking about and can't really. I opened my SVGs in Illustrator again. Here's initial SVG And here's distorted SVG I see bunch of points, looks like the same amount, but with handles? Or you where't talking about points on every single letter? I don't really understand this Compound Paths work... Super confusing. PathEditor is not available in public?
  10. If anyone have issues with embedding Codepen links (like I had), here's the answer - you need to hit space after the link!
  11. This was the first effect that I made with GSAP as well Youcan check it, it's slightly different, using 3d effect -
  12. Absolutely insane how you can achieve such effects with 5 LOC! I can't believe how I lived without GSAP before.
  13. Thanks for the answers. Probably I wasn't verbose enough, but my liquid effect will be used with mouse move, so I don't need this to be static (as with filters or Pixi), I need letter to be distorted like the're liquid (on mouse move). I used Envelope from Illustrator to achieve this warped paths, so I am not sure about points. To do this manually seems a little bit tough.
  14. Is it only me, or it's funny how they allowed super bloated `bodymovin` on this platform? What is this?
  15. Just require it anywhere, it will be registered to window.
  16. I made 2 SVG shapes - first is original text, the second is distorted, kinda liquid text. Now I am trying to morph it, but effect is not natural. Is there any other, more appropriate way to achieve this (without WebGL stuff)?
  17. ScrollMagic is not optimized to work on mobiles. How are you using it there? The good practice is to turn off complex scroll animation on mobile, not the opposite.
  18. A lot of developers and webmasters where very unhappy when this initiative appeared from Google. Now it's Designers/Animators turn. http://ampletter.org
  19. Yep, I also notice artifacts when DevTools is open (especially when Elements tab is open and tweening node is selected or when there's a lot of console logging). And I see no shaking in my Chromium on Ubuntu.
  20. Thank you for a such reasonable approach for licensing. I completely agree with your vision, and want to add, that some Clients could have hard times with managing all this licencing. Especially thanks for clarifying the scenario when Client continue maintaining the website without our help, this certainly should be mention in Contract, that licencing doesn't cover that. Very cool, absolutely love that!
  21. @GreenSock yep, with MorphSVG it works like a breeze. No need to hustle with third-party tooling! I have a question about licensing (can't find related topic on forum). How to handle licensing for the clients in situation when I am agency representative/developer and I need GSAP plugins work on different clients websites. I can't find licensing terms regarding this. Can you please clear this up, so I don't need to create another topic? Or should I better write to support? Thanks!
  22. Found the "solution" using Shapeshifter Now my question is - how to convert path to this format not using online tool? SVGO or something else can do this?
  23. After reading this topic, I assume this happens because Illustrator messed up `path` (even while having same 4 anchors)? Here it says that I need not only same points/anchors, but same sequence, and only thing that could change is numbers. While Illustrator exports absolutely different `d` points.
  24. @Sahil amazing example, amazing video, amazing book! I am shockingly amazed!