Append multiple items? + positioning question

[lixelart]

Forgot to clarify in title -- been using TweenMax

 

Hi Guys 

 

If you take a look at my codepen, you can see there are multiple 'dashes' animating on the left side of the screen. I have been slowly stripping down

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

. But these dashes are added as part of the bezier animation, and I'd like to add them without that... 

 

My goal is add multiple 'dashes' on page load, without delay. And add these at specific positions, without motion. 

 

Breaking down the task as I can understand it:

1. Load the first SVG all objects are based on, as a variable
2. Multiples of the SVG variable
   1. Add 10x more of that variable instantaneously
   2. Place these variables at specific x & y positions in the window
3. Looping fade animation (currently applies to all not individual)
4. Stretch goal! Add a nice fade in / fade out on all of it when you land / leave the page.

2.1 & 2.2 is where I feel stuck.

 

Pointers in the right direction? I think one of my biggest issues is that I don't know the correct vocabulary to use while searching...

 

Ultimately, I'd like to get the dashes spaced evenly on the x-axis, and randomly within a range on the y-axis, but animate a fade. That specific Math function is something I think I can work out later. 

 

Full disclosure -- I'm totally new to all of this (both GSAP and JS), so I'm in over my head a bit. But trying to get there by doing something challenging!  Also apologies for the junk list of links at the end of the codepen JS section, it's the easiest place for me to stash links while I'm tinkering.

 

Thanks!!

See the Pen BNJOOG by lixelart (@lixelart) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

I think you started with an overly complex demo to strip down and your challenge involves quite a bit of js that doesn't really involve GSAP.

It doesn't seem like animation plays much of a role in what you are trying to do but this simplified demo may help you see how to make things appear instantly at specific coordinates: http://codepen.io/GreenSock/pen/qdpgjo

 

var points = [{x:100, y:10}, {x:200, y:200}, {x:400, y:50}]


for (var i = 0; i < points.length; i++){
  var dash = $('<div class="dash"/>');
  container.append(dash); //add does not work here
  TweenLite.set(dash, {x:points[i].x, y:points[i].y})
}

[lixelart]

Thank you! That's fantastic!

 

Yeah I started messing with the bezier demo just for fun, and then had an idea come to mind. Guess it would have been better to start from scratch! 

 

I think from here, I can start to assemble the rest!