Jump to content
GreenSock

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

bdrtsky last won the day on March 15

bdrtsky had the most liked content!

bdrtsky

Members
  • Posts

    58
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by bdrtsky

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

     

    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.

    See the Pen EJReev by bdrtsky (@bdrtsky) on CodePen

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

     

     

     

    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? 

    See the Pen ZZxVgx by bdrtsky (@bdrtsky) on CodePen

  3. OK, I ended up like this, case closed :D

     

    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.

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

×