[How to loop with overlap?]

Thank you for your answers and examples, guys! Very helpful.

[How to loop with overlap?]

Ok, I fix it by using Vue.js `transition` 

Still wonder about `vanilla` way ?

[How to loop with overlap?]

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

[How to drawSVG from other side?]

@PointC yes! Awesome! I tried a few values, still don't really following the logic, need to reread the Docs once again. Thanks!

[How to drawSVG from other side?]

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

[Morph cycle between array of paths?]

@PointC actually, I like your solution! Didn't think about that I can loop it this way. This is awesome!

[Morph cycle between array of paths?]

UPD, got it, I need to `el.setAttribute("d", this.paths[0])`

 

Thanks guys!

[Morph cycle between array of paths?]

@GreenSock thanks! In my actual app code I have "ERROR: malformed path" error. What could cause it?

[Morph cycle between array of paths?]

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

[Morph cycle between array of paths?]

The result what I need is here, but I can't write timeline manually (whant to just pass the array of data) - 

See the Pen rOjeRq by GreenSock (@GreenSock) on CodePen

 

 

Probably some "timeline builder" function, not sure how to do that better...

[Morph cycle between array of paths?]

Yes, I made one - 

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

 

 

What I need is to loop between shapes in array. First, second, third. Without manually writing timeline. 

[Morph cycle between array of paths?]

Here you just creating 5 separate shapes with the loop. This is not what I am asking.

[Morph cycle between array of paths?]

But you don't loop between array of shapes here. You just switching 2 shapes. I need more then 2.

[Contradictory Information - Very CONFUSED!]

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.

[Morph cycle between array of paths?]

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?

[How to pause and then reverse after timeline?]

Oh wait. I can! I can define this in inside this function, not on master. Cool! Thanks!

 

Much simpler then I expect.

[How to pause and then reverse after timeline?]

I can't, this animation is only a part of the bigger one. 

[How to pause and then reverse after timeline?]

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? 

 

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

 

 

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

[Tween with calc doesn't work?]

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.

[Tween with calc doesn't work?]

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?

[Why move from anime to GSAP doesn't work as expected?]

I still can;t believe this forum exist. How I lived without it and your support?

[Why move from anime to GSAP doesn't work as expected?]

I've made it work, how cool is that?

 

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

 

 

Thank you @Dipscom

[Why move from anime to GSAP doesn't work as expected?]

Thank you, I will try that!

But it ends on z 0? so I will need third to I guess?

[Why move from anime to GSAP doesn't work as expected?]

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

[Why move from anime to GSAP doesn't work as expected?]

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 - 

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

 

 

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

2. Why my animation have initial jerking?

3. Why my elements doesn't moves up?

 

How to port it properly? 

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