Jump to content
Search Community

Trying to bring an Array into my Greensock intro page

Trev test
Moderator Tag

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

Hi Greensockers - you will see that my trouble is not Greensock but rather incorporating a two dimension Array to feed back into the TimelineMax tweens that I have set up. 

I have seen that it's possible to have the Tweens inside the array as it loads and have attempted that as well. 

I'm fairly sure that my limited programming knowledge hasn't helped me and I apologise for the circuitous methods employed. 

If anyone has time to plough through all this I would appreciate any help you can provide. 

Once I have the array loading and feeding I will add some colouration.   


Many thanks - Trevor 


Forgot - CodePen working is: http://cdpn.io/mkCJd and non-working is: http://cdpn.io/Abjip




greensock array test.html

Link to comment
Share on other sites

Hi Trevor and welcome to the Greensock forums.


Well in your first attemp there's nothing wrong. Just some pointers regarding some code/time saving stuff. Instead of typing over and over the word var, finish the variable declarations with a comma "," instead of a semi-colon ";", and when you declare the last variable you can finish with the semi-colon, like this:

var element1 = $("#element1"),
    element2 = $("#element2"),
    element3 = $("#element3"),
    element4 = $("#element4"),
    element5 = $("#element5");//final variable

It makes code easier to read because you know that all that stuff are variables, also you can use empty lines between one variable and the next one, like that you can group them according to what thiey are and their use.


Also try to comment your code with two slashes "//" or slash-apostrophe and the beginning of the comment and apostrophe-slash at the end, use the "<!-- -->" comment for HTML. Also keep in mind that good commenting is the diference between wasting quite some time when you go read a code after a while and not, the reason is that the HTML comment in JS looks like a code element while commenting with the standards makes the code easier to follow, the first time I looked at the HTML comment after a variable declaration my first thought was "what is this doing here and what it does in the code?", then I understood that those were comments.

//single line comment, anything after the two slashes will be commented, but only in the same line
var element = $("#element");//only this is commented

/* Everything in any line will be commented until the closing apostrophe-slash is found, doesn't matter if it is in the same line or not

var element = $("#element");//is between the comment's opener and closing characters


var element = $("#element");//is after the comment's opener and closing characters

Back to your code.


Basically you're animating each string in different order everytime the page loads, very cool effect, specially for a banner. In your working code I don't see anything that should be improved for better results, perhaps you could load your strings from a JSON file, but there's not going to be a huge difference as I said.


In your second code first you have a typo:

mathsfunctions = [], // empty array for Maths Functions Results
count = 0, i = 0;
var mathsfunctions = new Array (elementsAmount);

mathsfuntions [0] = new Array(8) 

Basically you're creating an array called mathsFunctions and then you're calling for it without the C: mathsFuntions, so that throws an error.


When you  fix that an error comes saying that introFontV is not defined for the line 28 of the code, I don't know what that function should do so you'll have to take it from there, but I found the first code better, if you're trying to achieve the same thing with both, is less code and neater.




Link to comment
Share on other sites



Things are looking very good on this now


I am now trying to make 3 or 4 of these lines run at the staggered times so that there is a continuous flow of texts for the duration


I'm not sure how to get loops 2 and 3 (&maybe 4) in the same If-Else statement


Maybe I need a GOTO or some similar device to check that COUNT doesn't exceed my number of text items (elementsAmount)


I have seen reference to stalling or pausing the Timeline but cannot find it again


Sorry to plague you again but you were very helpful last time








Link to comment
Share on other sites

Hi Trevor,


If you check this codepen:

See the Pen tgEBn by rhernando (@rhernando) on CodePen


You'll see how easy is to get that behaviour using the slowMo easing constructor and how neat it looks. All it takes is add a small negative delay into the tween vars.


In your case is hard to say what could be the problem but as soon as something in your code is changed everything kind of breaks down. I'm pretty sure that has something to do with the intricacies of your code, that's why in my previous reply I leaned for your first sample, is far less code and also is far less complicated, so it would be easier to add, but even in that one if you change the delay time it breaks.


What you could do is use the function to add the elements to the DOM and use the set instance to do the the css stuff (color, opacity), then using simple conditional logic to check when all the elements are added. Once all the elements are in the DOM you can go through them with a each loop to create just one tween for each element and a simple instance for the opacity.




  • Like 2
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.
  • Create New...