Jump to content
Search Community

Overwrite doesn't work 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

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

	}
});
Link to comment
Share on other sites

I think you are mis-using or misunderstanding the proper usage of the term overwrite.

 

In regards to GSAP, overwriting is used to resolve conflicts when 2 tweens are trying to manipulate the same properties of the same object.

 

For instance in the code below

TweenLite.to(elem, 1, {left:200, top:200})
TweenLite.to(elem, 1, {left:400, rotation:180});

Two tweens are trying to change the left property of the same element at the same time and thus there is a conflict. With TweenLite's default overwrite mode of auto, the second tween will overwrite the first tween, but only the "left" part. The first tween will still run and change the top property. There are a few different overwrite modes which you can read about it the TweenLite docs.

 

 

---

 

From what I gather from your description (and your other thread) you want to perpetually be adding new tweens on new objects to a timeline but you always want to remove the previous tweens from the timeline.

 

I would suggest the general approach of:

  1. create a timeline with 3 tweens on 3 objects.
  2. add a callback to that timeline that will fire when it completes
  3. use that callback to clear() the timeline and add the next 3 tweens

In other words, you will dynamically re-construct the timeline as it plays.

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...