Jump to content
Search Community

Sequencing tweens in TimelineMax

bunnie 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

Hello All,

 

I am using a repeater to display items from a database. What I would like to do is:

1.slide in first item

2.add transformation for second item

3. add a different transformation to the third item

 

After three items have been displayed I want to fade out first three and display next three items.

and I want to repeat this process in a loop..

Here is my code: I am stuck in between. I am very new to the web development and GreenSock. Any help will be greatly appreciated!

 

CSSPlugin.defaultTransformPerspective = 600;

var t1 = new TimelineMax();

 

$('.tick').each(function (index, item) {

//console.log(index, item);

if (index == 0) {

t1.to(item, .5, { x: 100, ease: Elastic.easeOut }, "+=0.5");

 

}

else if(index == 1){

t1.to(item, 2, { throwProps: { x: 200 } });

 

}

 

else {

t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut })

}

 

});

t1.play();

 

Thanks & Regards,

Bunnie

Link to comment
Share on other sites

Not sure what you mean by "I am stuck inbetween", but it seems you are getting into an area where you need help with more basic javascript programming concepts than the animation API. 

 

Unfortunately we can't go very far down the path of helping your build projects with advanced functionality. We have to stick close to problems / questions relating directly to GreenSock tools. 

 

A few things I can offer.

 

1: To fade out each item you can add a tween to the end of t1 like so

tl.to($(".tick"), 0.5, {autoAlpha:0}, 8) // fades out all .tick items at a time of 8 seconds

2: After all items are faded out you can call a function to either create a new timeline for the next 3 items or add tweens for the next 3 items to the same timeline. 

var t1 = new TimelineMax({onComplete:getNextItems});

function getNextItems() {
 // build a new animation
}

I have no idea how you are getting info from the database or how many records you are retrieving at a time. Technically speaking you could create 1 timeline that animates 300 elements in the way you described but it seems like you are only working with 3 elements at a time.

Link to comment
Share on other sites

Not sure what you mean by "I am stuck inbetween", but it seems you are getting into an area where you need help with more basic javascript programming concepts than the animation API. 

 

Unfortunately we can't go very far down the path of helping your build projects with advanced functionality. We have to stick close to problems / questions relating directly to GreenSock tools. 

 

A few things I can offer.

 

1: To fade out each item you can add a tween to the end of t1 like so

tl.to($(".tick"), 0.5, {autoAlpha:0}, 8) // fades out all .tick items at a time of 8 seconds

2: After all items are faded out you can call a function to either create a new timeline for the next 3 items or add tweens for the next 3 items to the same timeline. 

var t1 = new TimelineMax({onComplete:getNextItems});

function getNextItems() {
 // build a new animation
}

I have no idea how you are getting info from the database or how many records you are retrieving at a time. Technically speaking you could create 1 timeline that animates 300 elements in the way you described but it seems like you are only working with 3 elements at a time.

 

 

Thank you Carl!! I understand.

 

Please answer the below question:

t1.from(item, 0.8, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut })

 

For the above, I want it to slide first in the x direction(x:100) and then transform. It directly transforms but doesn't slide before that. Does slide doesn't work with rotation or Is there a mistake in the code?

 

Thanks & Regards,

Bunnie

Link to comment
Share on other sites

Hi,

 

If you want to chain the animations (slide first and then transform) add two different tweens to the timeline:

t1
    .to(item, 0.8, {x:100})
    .to(item, 0.8, {rotationX:-90, transformOrigin:"50% 0px", ease:ease.Back.easeOut});

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Carl/Rodrigo

 

I have 10 items in my list. I want to tween first three items and tween set of next three items until the end of all items and then repeat the process once completed. You told me to call a function to add more tweens or create a new timeline for that. Currently I have the following code. But I want to tween a set of 3 at a time. Can you please show me an example how to do that...

 <script type="text/javascript"> $(document).ready() { CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }); $('.tick').each(function (index, item) { if (index == 0) { t1.to(item, .3, { x: 20, ease: Back.easeOut }); t1.to(item, 0.4, { x: 0, ease:Back.easeOut, opacity:50 }) } else { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }) } }); }); </script> 

Any help will be greatly appreciated. Thank you!

 

Thanks,

Bunnie

 

 

 

 

 

Link to comment
Share on other sites

Hi,

 

You can use the division reminder and some conditional logic to create labels in your timeline and add a set of three elements at each label position, like this:

CSSPlugin.defaultTransformPerspective = 600;

var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }),
	count = 1;//the label number

$('.tick').each(function (index, item)
{
	t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }, 'label' + count)

	if(index % 3 == 2)
	{
		count++;
	}
});

Note that if you want the first element to have a particular tween, ie, not the same tween as the rest of the elements, you'll have to take it outside the each loop and run the previous code, including the count conditional, with a different set or array of elements that excludes the first one.

 

You can see it here:

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

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

You can use the division reminder and some conditional logic to create labels in your timeline and add a set of three elements at each label position, like this:

CSSPlugin.defaultTransformPerspective = 600;

var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }),
	count = 1;//the label number

$('.tick').each(function (index, item)
{
	t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }, 'label' + count)

	if(index % 3 == 2)
	{
		count++;
	}
});

Note that if you want the first element to have a particular tween, ie, not the same tween as the rest of the elements, you'll have to take it outside the each loop and run the previous code, including the count conditional, with a different set or array of elements that excludes the first one.

 

You can see it here:

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

 

Hope this helps,

Cheers,

Rodrigo.

Hello,

 

Thanks for your fast response! I think my question was little confusing.. I want to display first three items one after the other in a row and then overwrite them with next three items and so on...

 

For example first I want to display 

1

2

3

 

and then overwrite them with

 

4

5

6

and then overwrite them with 

7

8

9

 until the end of items and repeat the whole process. I wanna have different tweens for 1, 2, 3.

The tween applied for 1 will repeat for 4,7 and the tween applied for 2 will be applied for 5,8 so on....

 

 

Hope you understood your question! I really appreciate your help..

 

Thanks,

Bunnie

Link to comment
Share on other sites

Hi,

 

Yep I see now what's the idea. Unfortunately I couldn't come up with a complete solution at this hour; the challenge was to call the elements 3 at a time, add those to a timeline with a repeat and yoyo, then call the next 3 to a different timeline with repeat and yoyo, and so on...

 

The good thing is that I didn't knew how to declare variables dynamically and now I do  :), so what I came up with is the following:

var count = 1,
	masterTL = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:.5}),
	tl1 = new TimelineMax({repeat:1, yoyo:true}),
	lineArray = [];

$.each($("div.tick"),function(index, element)
{
	if(count == 1)
	{
		console.log("Hi-diddly-ho, neighborino!!");
	}
	if(index % 3 == 2)
	{
		count++;
		var newLine = 'tl'+count;
		lineArray.push(newLine);
		lineArray[count-2] = new TimelineMax();
		for(var i = 0; i <= index % 3; i++)
		{
			console.log("internal");
		}
		console.log('count: ' + count + '\n' + 'reminder: ' + index % 3);
		console.log(lineArray[count-2]);
	}
});

The first part of the loop takes the first 3 elements and add those to the previously created tl1, then since count increases to 2 that part of the code never runs again. The following takes the next three elements and add those to a timeline named tl2, then the next 3 to a timeline tl3 and so on. Finally you have to add each timeline to the parent one (masterTL).

 

I'll see if I can complete this during the weekend, I'm half sleep now.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

I need timeline with repeat and yoyo only oncomplete of all items not for every three items. I gave numbers for example, please give your snippet with the items as you have showed in the codopen before!

 

I tried to overwrite the first set of items(3 items) with next three, but overwrite didn't work :-(

Trying to figure out other ways to do this:

 

Meanwhile, if anyone has a solution please post it...

 

Here is what I tried..

 But I guess overwrite doesn't work in this context..

CSSPlugin.defaultTransformPerspective = 600;

var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }),
	count = 1;//the label number

$('.tick').each(function (index, item)
{
  
	t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut, overwrite: "none" }, 'label' + count)
count++
	if(index % 3 == 2)
	{
    t1.TweenLite.defaultOverwrite = "all";
    

	}
}); 
Link to comment
Share on other sites

Hi,

 

Yes overwrite doesn't work like that and is not intended for this situation. What it does is resolves conflicts when two GSAP instances are animating the same object, at the same time and the same properties. In this case you're assigning different instances to different objects, therefore the engine doesn't sees any conflicts and subsequently the overwrite does nothing.

 

The thing is that what you're building is not the easiest thing to do, specially if it is dynamic, which is always ideal. Perhaps creating an array adding the first three elements of the collection and passing them to a timeline, then empty the array and add the following three to another timeline and so on, and finally nest all those timelines to a master one.

 

Maybe my approach is not the best one, I'm far from being the best JS coder in this forum and like Jack said in another post people frequently overcomplicate things and in the same extent code. If the way I'm trying is indeed the best you'll need to give me more time, maybe more than you can spare right now, but at this point I can't do more than I've already done, just like anyone else I've bills to pay each month, I hope you understand.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi,

 

Please don't think for an instant that this is any source of trouble, problem or inconveniences for me, is the complete opposite it gives me a lot satisfaction help people in the forums and also has been a great source of knowledge for me. Also this is what I like to do so I have a lot of fun doing it. I'm a little obsessive about things and you can bet that until this is solved it'll keep going in my mind.

 

The thing is I have the perception that you might be in a hurry with this one, therefore my timetable would not meet yours, now if is not too urgent I'll keep whacking at it.

 

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I think I may still be confused by exactly what you need and I have to hand it to Rodrigo for all his effort.

 

Here is a codepen example that animates objects in groups of 3s.

 

http://codepen.io/GreenSock/pen/1acd8dcadc079988072ff1e6e8d94af5

 

Each object in the group has its own unique animation. 

 

Each time a new group gets animated, the timeline gets cleared and the next 3 objects get animated in the same way as the previous 3 objects.

 

When all groups of 3 have animated, all the objects get their properties reset and the animation starts again.

 

Also, a group can have less than 3 objects and nothing breaks.

 

There are probably half a dozen ways to do this. I really think this could just be 1 timeline that plays over and over and there really isn't a need to keep dumping tweens and adding new ones, but at one point I thought that is what you were asking for.

  • Like 3
Link to comment
Share on other sites

Hi,

 

I've updated the codepen and is now completely dynamic. The magic number is on line 10 of the JS, with that you can set how many elements will be animated per cycle.

 

I hope this comes closer to what you need, if it doesn't please feel free to fork the codepen and play with it or create one of your own in order to get a better grasp of what you're trying to achieve.

 

You can see it here:

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

 

Hope this helps,
Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Rodrigo,

 

Great work Rodrigo!! I seriously surprised with your dedication! Thanks a lot for your response!

 

This is what I am looking for but needs a small change...

I have a fixed block to display this list of objects on my page, i:e for ex: width 100px and height of 150px which accomodates only 3 objects at a time. So once the first set animates and fades off I want to display the second set in the same block or the same place.. Now what happens is: First set animates top of the page and fades off, then second set starts underneath it leaving the top of the page blank.. I want to display the set of objects in the same  block..

 

Since the opacity is 0, each set of objects disappears after their animation; can we clear this Timeline and call the next set of objects so that we them displayed in the same place or same block? I am trying to figure out a better way to do this.

 

Please let me know if this is clear or I am confusing you more..

Is there a way that I can display the each set of objects in the same block?

 

You guys rock! :-)

 

Thanks & Regards,

Bunnie

Link to comment
Share on other sites

Hi,

 

Well at the end this was far more simple that what was thought. In this scenario even the JS can be quite more simple.

 

You have to create a main wrapper with a relative position, inside that create individual containers, those need an absolute position and finally inside the individual containers put the tick divs with relative position.

<div id="wrapper">
  
  <div class="container">
    <div class="tick">1</div>
    <div class="tick">2</div>
    <div class="tick">3</div>
  </div>
  
  <div class="container">  
    <div class="tick">4</div>
    <div class="tick">5</div>
    <div class="tick">6</div>
  </div>
    
  <div class="container">
    <div class="tick">7</div>
    <div class="tick">8</div>
    <div class="tick">9</div>
  </div>    

  <div class="container">
    <div class="tick">10</div>
  </div>
    
</div>

Like I said with this the solution would've been create a loop for the containers and inside that loop create a timeline for each container, then add another loop(still inside the container loop) and add each tick to the specific timeline. Finally add all timelines to a parent one and done!!.

 

I've updated the codepen, only the css and html  :D, with the new layout:

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

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hello Rodrigo,

 

Thanks for your fast response! I wish it was simple :-)

 

I forgot to mention that, my list is dynamic so I cannot create individual containers with a set of 3 objects in my html. Initially I thought of this but it didn't work. My list might contain any number of objects may be 2 or 10 or may be 100  in it so, I cannot divide my wrapper into individual containers in HTML, it should happen dynamically in the code. 

 

Sorry for having many back and forth conversations.

 

I am not sure if there is a simple solution to this and I am thinking in a more complicated way.. 

 

I really appreciate your help!

 

Thanks & Regards,

Bunnie

Link to comment
Share on other sites

In that case you could just remove the hidden elements from document flow so that the visible ones are always positioned from the top of the container. You can put display:'none' and display:'block' in a tween and it will intuitively decide when to swap the display mode i.e.

 

'none' will occur at the end of the tween, like how autoAlpha will toggle visibility at the end.

 

'inline', 'inline-block', 'block' etc will swap at the beginning, so that the element is visible for the duration of the tween.

  • Like 1
Link to comment
Share on other sites

Thanks for the suggestion Jamie works great  8-)

 

Here's the codepen updated:

 

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

 

Bunnie, In order to use and modify the pens at will you have to create a codepen account. The service is free (with some limitations) but is great and there are a lot of users doing great stuff in there, so is also a good source of inspiration.

 

Hope this helps,

Cheers,

Rodrigo.

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