clearProps of Timeline

[SigSam 0 Likes (Newbie)]

I'm wanting to be able to destroy a timeline (based on resizing). When i destroy the timeline, i want to remove all of it's initial set-up CSS.

Here is how a timeline is set-up:

var scene = new TimelineLite();

 

    scene

      .add("start", 0);

 

    scene

      .from(panel, 20, {

        opacity: 0

      }, "start")

      .from(panelText, 20, {

        y: "+=60px"

      }, "start")

      .from(background, 20, {

        scale: "1.15"

      }, "start")

 

With this, the panel is set to Opacity 0 initially. 

I have timelines within timelines as each panel (17 of them) animate in various combinations.

I don't want the timeline active on mobile so i can disable it, but is there a method like clearProps for removing all CSS generated by all the timelines? Or must this be done outside of GSAP?

 

The codepen attached (i got from the closest post i could find relating to this issue) demonstrates it resetting to the start, but the elements still have their CSS properties.

See the Pen LKdqk by GreenSock (@GreenSock) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Hi SigSam,

 

You can use the CSS plugin's clearProps property.

timeline.set(".panel", { clearProps: "all" });

See the Pen EaoMdo by osublake (@osublake) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi SigSam,

 

but is there a method like clearProps for removing all CSS generated by all the timelines?

 

There is not an API method that loops through all children of a Timeline, finds their targets (objects that were tweened) and does a clearProps on them. 

However the API has enough hooks so that you could write something that does that. To start down that route, check out the getChildren() method:  http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/getChildren/

 

Another option would be to track the targets of your tweens yourself in an Array or make use of your DOM structure and advanced string selectors to find the elements that need to be cleared. Perhaps just find all child elements of a particular element and clear them all.

[OSUblake 9,990 Likes (Superhero)]

Here's a function that will return a unique list of all the elements in a timeline.

 

function getTargets(timeline) {

  function addTargets(list, target) {

    if (Array.isArray(target)) target.forEach(checkTarget);
    else if (target.nodeType === 1) list.push(target);
    else if (target.jquery) target.each(function() { list.push(this); });

    function checkTarget(el) {
      if (el.jquery) list.push(el[0]);
      else if (el.nodeType === 1) list.push(el);
      else if (typeof el === "string") list.push(document.querySelector(el));
    }
    return list;
  }

  return timeline
    .getChildren(true, true, false)
    .map(function(tween) { return tween.target; })
    .reduce(addTargets, [])
    .filter(function(target, i, list) { return list.indexOf(target) === i; });
}

See the Pen NPyKrM by osublake (@osublake) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi guys

 

how about this :

var scene = new TimelineLite();

scene.add("start", 0)
.from("#red", 5, {opacity: 0},"start")
.from("#green", 5, {y: "+=60px"},"start")
.from("#blue", 5, {scale: "1.15"},"start")

$("#kill").click(function() {
    var targets = scene.getChildren();
    scene.kill();
    for (var i=0; i<targets.length; i++) {
      console.log(targets[i].target.selector) // check the console
      TweenMax.set(targets[i].target.selector, {clearProps:"all"});
      /* if you dont use jquery
      console.log(targets[i].target[0].id) 
      TweenMax.set(targets[i].target[0], {clearProps:"all"});
      */    
     };
 });

 

See the Pen RNQwyE by MAW (@MAW) on CodePen

[SigSam 0 Likes (Newbie)]

Thanks for all of your help. I've been loving GSAP and it's handling of multiple timelines.

 

As i had scenes (timelines) within the main story (timeline), I just had to check in the loop if they weren't null. The final result:

 

var targets = story.getChildren();
story.kill();
for (var i=0; i<targets.length; i++) {
  if (targets[i].target != null) {
     TweenLite.set(targets[i].target, {clearProps:"all"});
  }
}

[farhoudz 8 Likes (Newbie)]

Hi guys

 

how about this :

var scene = new TimelineLite();

scene.add("start", 0)
.from("#red", 5, {opacity: 0},"start")
.from("#green", 5, {y: "+=60px"},"start")
.from("#blue", 5, {scale: "1.15"},"start")

$("#kill").click(function() {
    var targets = scene.getChildren();
    scene.kill();
    for (var i=0; i<targets.length; i++) {
      console.log(targets[i].target.selector) // check the console
      TweenMax.set(targets[i].target.selector, {clearProps:"all"});
      /* if you dont use jquery
      console.log(targets[i].target[0].id) 
      TweenMax.set(targets[i].target[0], {clearProps:"all"});
      */    
     };
 });

 

See the Pen RNQwyE by MAW (@MAW) on CodePen

 

What about using this function for multiple Timelines at once? I mean clearing properties that are set with multiple Timelines on multiple targets which some of them are common in all Timelines, Could I do this like this? Because I get an error saying "can not tween a null target" !!

function clearProps(scene) {
        var targets = scene.getChildren();
        for (var i = 0; i <= targets.length; i++) {
            TweenMax.set(targets[i].target.selector, {
                clearProps: "all"
            });
        }
}
    
function clearAllProps() {
       
        var timeLines = [firstSwipeRight, secondSwipeRight, directSelect];
        for (var x = 0; x <= timeLines.length; x++) {
            clearProps(timeLines[x]);
        }
}

[OSUblake 9,990 Likes (Superhero)]

Look at the comments Diaco left below his code. If you're not using jQuery, there is no selector property, so that could be your problem. If that's not the issue, make a demo so we can check it out.

 

Or you could try that helper function I made above which will return a unique list of all the elements. The reason I made that is because a timeline target is not always an element, which might be the source of your problem. It could be a jQuery object, a node-list, an element, a string, a function, an array of different things, etc.

 

Check out my demo above. I mixed a bunch of timelines and random things together just to show how it would sort out unique targets.

[kreativzirkel 43 Likes (Newbie)]

Old topic, but I thought I'd share my lil' enhancement, which helps me quite a lot!

 

EDIT:

Question: Whats the best way to find out if clearProps is already set? I cant get it to work.

`targets[f].vars.css.clearProps produces an error`
`TypeError: undefined is not an object (evaluating 'n[e].vars.css.clearProps')`

 

// EDIT!
// Don't copy yet!
// I still need to find out how to check if clearProps is already set

TimelineMax.prototype.clearProps = function( props, overwrite ) {

	// which props? (default is "all")
	var props = typeof props !== "undefined" ? props : "all";

	// overwrite existing clearProps? (default: true)
	var overwrite = typeof overwrite !== "undefined" ? overwrite : true;

	var targets = this.getChildren();
	if (targets.length > 0) {

		// only onComplete clearProps
		this.eventCallback("onComplete", function() {

			for (var f = 0; f < targets.length; f++) {
              	// targets[f].vars.css.clearProps produces an error
              	// TypeError: undefined is not an object (evaluating 'n[e].vars.css.clearProps')
				if (targets[f]....... CLEARPROPS??? ......) continue;
				TweenMax.set(targets[f].target, { clearProps: props });
			}

		})
	}

	return this;
} 

 

Used like this:

var tl = new TimelineMax()
	tl
		.to(".top-bar", 1, { x: 50 })
		.to(".bottom-bar", 1, { x: 100 })
		.from(".bam", 1, { scale: 2009239 })
		.staggerTo(".things", 15, { rotation: "+=2" })
		.set(".bla", { display: "none" })
		// ...

		// too lazy to write ,  clearProps: "all" aaaall the time?
		.clearProps()
	;

 

 

Or:

var tl = new TimelineMax()
	tl
		.to(".top-bar", 1, { opacity: 0, x: 50 })
		.to(".bottom-bar", 1, { opacity: 0, x: 100 })
		.from(".bam", 1, { opacity: 0, x: 200, scale: 2009239, clearProps: "x" }) // only need x to clear 
		
		.clearProps("opacity", false) // only clear opacity and don't overwrite existing clearProps!  
	;