[Animating width not smooth]

@mikel Thank you very very much for this explanations! Awsome. I'm tring to rebuild your codepen. struggling with the masks. Well I have to understand that clearly.

 

But thtanks. way better approach with a big svg file, than extra divs and containers.

[Animating width not smooth]

@mikel thank you. this is awsome. could you please explain me what you actualy did so i cant unterstand it? What was your workflow. I think i dont unterstand how to mask stuff in svg.

[Animating width not smooth]

okay I found out when i change the animation__fourth width to a fixed width it is working. How is it possible to pass a variable there for the width? i Get undefinded. 

[Animating width not smooth]

Hello people

 

I have a problem. I created the animation which you can see in my codepen. The third animation is not smooth in chrome and safari. It is working ok in firefox but in chrome and safari it is shaky. Anyone any idea why this is happening? I'm animation the width from 0 to 100% of the inner div. I know animation width is not according to the flip approach but well, didn't know how to solve the problem otherwise. 

 

Ah you need to scroll down so the animation starts. 

 

Any help appreciated! 

 

External link: https://condescending-bhabha-c8e37c.netlify.com/circle_house.html

See the Pen VVOqrL by elpeyotl (@elpeyotl) on CodePen

[Timeline first element with repeat: -1 not triggering second one]

Oh! Thanks @GreenSock Awsome which explained all my needs!

 

This is awsome.

[Timeline first element with repeat: -1 not triggering second one]

Thank you for your fast responses! Awsome!

 

So if I use:

 

tl.to();

 

I can give the element an offset and it will then start then? Asynchron?

 

If I use:

tl.add()

 

It will run after the previous animation is finished? Is that right?

[Timeline first element with repeat: -1 not triggering second one]

Hi community!

 

I'm first time playing around with GSAP and I love it. I tried to build a little demo where a bee is flying. The clouds are moving but If I use no timeline the delayed clouds (cloud 3 & 4) are moving too fast. Any Idea how I can fix that?

 

I tried to use a timeline but it is not working. I think because the first element (#bee) has an infinite repeat (-1) so its not starting the second tween. Is there a way to start the tweens in a timeline manually? I didnt understand the docs and couldn't find it.

 

Thank you!

See the Pen pLxPEP by elpeyotl (@elpeyotl) on CodePen