bunnie

August 13, 2013

Thanks a lot Rodrigo, I will do that!!

This works like a charm! You're amazing!

Thanks & Regards,

Bunnie

August 12, 2013

Hello Jamiejefferson,

Thanks for your response!I changed my code as you said but it stopped animation and didn't work.

Can you please make modify my codepen given below:

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

Thanks & Regards,

Bunnie

August 11, 2013

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

August 10, 2013

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

August 9, 2013

Carl,

I just realized sometime back that the overwrite is used in a different scenario.

I am trying a similar approach what you said. I am having trouble in adding a callback..

1.All my objects are in a list meaning they are classified under the same class. As you said I want to create 3 tweens for thirst three objects, do I have to refer to the item using index?

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

});

Can you please provide me an example or a code snippet demonstrating your approach in codepen. That would really help!

I really appreciate your help, Thanks for your time.

Awaiting your response,

Bunnie

August 9, 2013

Rodrigo,

I am really sorry for troubling you! I will try implementing your approach.

Please take your time and post the solution whenever you are convenient!

Thanks & Regards,

Bunnie

August 9, 2013

Can I create multiple timelines on the fly and set them to true one at a time?

Can someone please help with me!

Thanks & Regards,

Bunnie

August 9, 2013

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";
    

	}
});

August 9, 2013

I want to tween first three items and then replace the 3 items(overwrite) with next three items for tweening and after that I want to overwrite next 3 : continue so on until the end of items and oncomplete, I want to repeat the whole process.

I am using overwrite to overwrite the first three with next three but it doesn't work!

Can someone help me with this?

Is something wrong in my code?

Any help will be greatly appreciated!

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";

	}
});

August 9, 2013

Thank you Rodrigo! I will be waiting for your response!

August 9, 2013

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

August 8, 2013

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

August 5, 2013

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

August 5, 2013

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

August 2, 2013

Thanks a lot Rhernando!! This really helps. :-)

August 2, 2013

Thanks a lot Carl!! This really helps.. I was going thru Jump Start yesterday.. I really appreciate your response! I will let you if I have any more questions

August 1, 2013

I want to slide each element in my div one after the other having some pause after each item slides. Below is my code attached.

$(function () {

$('.tick').each(function () {

var $self = $(this);

var t1 = new TimelineLite();

t1.to($self, .5, { x: 100, ease: Cubic.easeInOut });

t1.pause();

t1.resume();

});

what it does is: It slides all the items at a time. Why isn't it pausing after each item slides... What is the issue in the code?

Thanks & Regards,

Bunnie

August 1, 2013

Hello All,

I am very new to GreenSock plugins. I want to implement animations in my code as shown in the video in the starting.

http://www.greensock.com/css3/

In the starting of the video, how the CSS plugin and CSS Special properties animates, I want the exact same effect to my labels.

I searched for the plugin and code for that animation but I couldn't find it.

Could you please let me know the code for that effect? Thank you!

Thanks,

Bunnie

Notifications

Messages

bunnie

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by bunnie

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Overwrite doesn't work in TimelineMax

Sequencing tweens in TimelineMax

Overwrite doesn't work in TimelineMax

Sequencing tweens in TimelineMax

Overwrite doesn't work in TimelineMax

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Sequencing tweens in TimelineMax

Pause is not working in Timeline

GreenSock CSS 3D transformations

Pause is not working in Timeline

GreenSock CSS 3D transformations