Jump to content


Append multiple items? + positioning question

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.



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

Link to comment
Share on other sites

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})
  • Like 1
Link to comment
Share on other sites

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!  :mrgreen:


I think from here, I can start to assemble the rest! :geek:  :-P  :-P

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.