Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to Clear All the animated values and properties on TimelineMax at once using clearProps or proper method (SOLVED)

Recommended Posts

Hi, I want to know how to clear all the animated properties from TimelineMax at once. not individual. like onComplete clearProp all or something like that and all the nested elements also. is there a way to use wildcard selector?





var tl = new TimelineMax({id:"sliderOut", autoRemoveChildren:true, onComplete:function(){
    // i want to clear all the animated values and properties at once not individual

      .staggerTo($nameSplit.chars, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"+=0")
      .staggerTo($descSplit.words, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5")
      .staggerTo($techSplit.lines, 0.4, {x:'10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5")
      .to($slide_img, 1, {yPercent:'10', autoAlpha:0, ease:Power4.easeOut},"-=0.5")
      .to($slide_left_svg_bg, 1.5, {x:'20%', autoAlpha:0, ease:Back.easeInOut},"-=0.5")
      .to($slide_right_svg_bg, 1.5, {x:'-20%', autoAlpha:0, ease:Back.easeInOut},"-=1.5")
      .staggerTo($staticTitleSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5")
      .staggerTo($numSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5")
      .to($left_out_bg, 0.5, {x:'100%', ease:Power4.easeOut},"-=0.5")
      .to($right_out_bg, 0.5, {x:'-100%', ease:Power4.easeOut},"-=0.5");
Link to post
Share on other sites

clearProps: 'all' will remove all inline styles.

  • Like 1
Link to post
Share on other sites

hi, @Sahil thanks for your feedback.


and yes I know that method. but I want to clear all the timeline elements like $nameSplit.chars, $descSplit.chars so on. without specifying individual onComplete callback and onCompleteParams with clearProps. I want global onComplete to clearProp all the elements. is it possible to do? if you have time, can you show me how to do it simply?

Link to post
Share on other sites

I am not sure, but I doubt something like this must be built into GSAP as it is really rare someone will need it. I think simplest way would be an onComplete callback on timeline as follows and manually pass all targets,


TweenMax.set(arrayOfElements, {clearProps: 'all'});


Following is similar thread that discusses same,



  • Like 3
Link to post
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.