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. @GreenSock yes, this is it! Thank you! And if you don't mind I'll kinda "steal" it too ? This demo is so amazing. I was literally laughing while looking at it.
  2. Good day. kinda dumb question, but recently I found awesome Pen from one of forum members and didn't save it. It was SplitText effect, where words appeared like this - https://tobiasahlin.com/moving-letters/#4 But the interesting part was that it calculated the word length and for long words the pause was longer. Can you please help me to find it? It was one of you guys
  3. Thank you for your answers and examples, guys! Very helpful.
  4. Ok, I fix it by using Vue.js `transition` Still wonder about `vanilla` way ?
  5. Following my previous question about looping. After I tryed to modify it a little bit to add overlaping (so the next animation trigger not after previous completely ends, but slightly earlier) I have issue that I can't solve. First I tried to use simple setInterval. Works fine on first sight, until I switch browser tabs. After that looks like asynchronisation is happens. My question is, how do I loop animation, but add some shift on next animation start? delay is not helping in this case - https://codepen.io/bdrtsky/pen/EJReev What I need is both elements start to animate in the same time (one leaving, the other entering). Is there some native API for this? because setInterval is not working.
  6. @PointC yes! Awesome! I tried a few values, still don't really following the logic, need to reread the Docs once again. Thanks!
  7. Hello again everyone on this great forum. I started to play with DrawSVG and have a question. I bet it was asked thousand times before, I read some answers, still confused about the sythax and principle of work. https://codepen.io/bdrtsky/pen/ZZxVgx Here, checkbox animated from left to right and then from right to left. But how to make second (exit animation) animation also move from left to right?
  8. @PointC actually, I like your solution! Didn't think about that I can loop it this way. This is awesome!
  9. UPD, got it, I need to `el.setAttribute("d", this.paths[0])` Thanks guys!
  10. @GreenSock thanks! In my actual app code I have "ERROR: malformed path" error. What could cause it?
  11. @PointC yes, like this, thanks. Beside one part - how to actually loop it? If I add repeat: -1 it jumps to first shape, not morphing And I want to maintain the order, so yo-yo will not work.
  12. The result what I need is here, but I can't write timeline manually (whant to just pass the array of data) - https://codepen.io/GreenSock/pen/rOjeRq Probably some "timeline builder" function, not sure how to do that better...
  13. Yes, I made one - https://codepen.io/bdrtsky/pen/qwjEKP What I need is to loop between shapes in array. First, second, third. Without manually writing timeline.
  14. Here you just creating 5 separate shapes with the loop. This is not what I am asking.
  15. But you don't loop between array of shapes here. You just switching 2 shapes. I need more then 2.
  16. Interesting, how (and why?) you using react, if you didn't learn how to use npm? You installed it globally. Of course you will not find it in node_modules.
  17. Hello, guys! Let's say I have an array of paths. Is there a clean native way to loop between them? First shape, second etc...I mean, I probably could setTimeout and then loop manually, but is this the right way?
  18. Oh wait. I can! I can define this in inside this function, not on master. Cool! Thanks! Much simpler then I expect.
  19. I can't, this animation is only a part of the bigger one.
  20. Hello, everyone on this great forum. Can someone help me to figure out, how to make timeline animation to pause after the one cycle for 3 seconds and then just reverse animation back?
  21. OK, I ended up like this, case closed const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) TweenMax.to(circle, 0.5, { x: e.clientX - rem/2, y: e.clientY - rem/2 }) I assume there's like a zillion different units in CSS that needs to be implemented so calc could work smoothly, so it's bettter to do that in JS.
  22. Good day, everyone. I am trying to do so TweenMax.to(circle, 0.5, { x: `calc(${e.clientX}px - 0.5rem)`, y: `calc(${e.clientY}px - 0.5rem)` }) But it's not working. Can I do that? Tryed to google, saw a bunch of bug reports, but looks like people using it? How?
  23. I still can;t believe this forum exist. How I lived without it and your support?
  24. I've made it work, how cool is that? Thank you @Dipscom
  25. Thank you, I will try that! But it ends on z 0? so I will need third to I guess?