Jump to content
Search Community

Creating timelines in a for loop and use them later

Oscar Rottink 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

I feel pretty stupid but I want 9 timelines doing the same but with different numbered DIV's. So I thought it was smart to create them using for... loop. 

 

Like:

var careerPopupAnim0 = new TimelineMax({paused:true, immediateRender: true});
careerPopupAnim0.set($("#popup0 .popupTop"), {scale: 0, rotationX:-140, x:0, y:0, z: 0});
var careerPopupAnim1 = new TimelineMax({paused:true, immediateRender: true});
careerPopupAnim1.set($("#popup1 .popupTop"), {scale: 0, rotationX:-140, x:0, y:0, z: 0});

Do I tried something like:

for ( i=0; i<9; i++ ) {
  tlName = "careerPopupAnim" + i;
  var "careerPopupAnim" + i = new TimelineMax({paused:true, immediateRender: true});
  tlName.set($("#popup" + i + " .popupTop"), {scale: 0, rotationX:-140, x:0, y:0, z: 0});
}

And play them afterwards using something like:

$( ".cPoint" ).bind('touchstart mousedown', function(event){
  popTxt = event.currentTarget.classList[1].substr(6,1);
  tlName = eval('careerPopupAnim' + popTxt);
  tlName.play();
});

It picks a number (from class name) and should play the corresponding timeline.

 

I know it's maybe a very basic javascript question but every time I struggle with this. I tried to use arrays, and other stuff but I just don't get it right.

Link to comment
Share on other sites

Hi OzBoz  :)

 

if i understand your target correctly , i think you don't need For Loop ,  you can do something like this :

$(".cPoint").each(function(index, element){
TweenMax.set(element,{opacity:0.5})
var tl = new TimelineLite({paused:true});
tl.to(element, 1, {opacity:1})
.to(element, 1, {x:200})
element.animation = tl;
})

$(".cPoint").bind('touchstart mousedown', function(){
this.animation.play();
});

and  "immediateRender" isn't a Timeline property.

  • Like 3
Link to comment
Share on other sites

Hi 

 

You are my hero. I need some tweaking but this is exactly what I meant. Like now I spend hours trying and thinking way to complicated. I wanted to send you a private message because this kind of stuff is basic knowledge I think. You were offline so I posted it anyway. I really need more basic knowledge of javascript.jquery.

 

I will send you a preview of what I'm working if this is fixed so you get an idea. All parts of my own business/portfolio/cv site. Which is different ;)

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...