bezier path help

[rgfx]

Hello,

 

1. My curve doesnt really start at x:0 y:17.8. Its falls a little low and to the right. 

2. When I try to add my full bezier path in the path variable. It doesnt work  later when I try to call using values:path it just sits there. 

3. Trying to create an "expanding foam" effect.  My hack was to mess with the stagger position parameter, but when first loading it start to show at that parameter. So you see it at 3.9 in.

4. Can I add more dots or am I already overdoing for slower computers?

 

I hope you know what I mean. Still learning programming and gsap, on my own I'll be here for another week. Lots of questions, so thanks for your time.

See the Pen dPbBWZ by rgfx (@rgfx) on CodePen

[Diaco]

Hi rgfx 

 

your Bezier curve correctly start at {x:0, y:17.8} but you cant see the first dot ( scale:0 ) ;

since your scale tween run with "-=3.9" gap , for the first dot tween is not firing ( it`s beginning of the timeline ) . so i added a IF condition to your For loop .

and with force3D:'auto' you can have better performance .

 

pls check this out :

 

See the Pen bNbPxP by MAW (@MAW) on CodePen

[rgfx]

Force 3d helped a lot, what are your thoughts on 100 div's is that ok?

 

I found out my position problem was because of 10px 10px size of dot. Doesn't seem like transformOrigin puts the "pivot" in the center when it comes to connecting the bezier. starting at 1px 1px turns into a weird box. 

 

I have to create two different path's because of retina devices, going to add some responsive js later. So it important I know how to call path variable. Here is a link to broken variable  

See the Pen jENjjW by rgfx (@rgfx) on CodePen

 

Bet its something simple. 

 

Thank you for your solution to tween gap. Maybe after my js lesson I can figure stuff out like that on my own. 

[Diaco]

it depends on what's in your page by this tweens , but i think that's ok .

be careful about variables naming , pls check the codepen again

 

See the Pen bNbPxP by MAW (@MAW) on CodePen

[rgfx]

Thanks pal, your always hooking me up!