Jump to content


Timeline from value not resetting

Recommended Posts



I have a timeline that repeat infinitely but I have a problem with the second loop onward. I'm using the from value to reset justifyContent but for some reason after the first loop it doesn't reset. The from value is ignored.


const tl = gsap.timeline({ repeat: -1, repeatDelay: 6 });
tl.fromTo(t1, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1');
tl.fromTo(t4, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<');
tl.set(t1, { order: 9 });
tl.fromTo(t2, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1');
tl.fromTo(t5, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<');
tl.set(t2, { order: 10 });
tl.fromTo(t3, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1');
tl.fromTo(t6, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<');
tl.set(t3, { order: 11 });
tl.fromTo(t4, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1');
tl.fromTo(t7, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<');
tl.set(t4, { order: 12 });
tl.fromTo(t5, { justifyContent: 'flex-end' }, { height: 0, duration: 1 }, '>1');
tl.fromTo(t8, { justifyContent: 'flex-start' }, { height: 'auto', duration: 1 }, '<');

Any idea what I'm doing wrong?

Link to comment
Share on other sites

If you're resetting values have you looked at clearprops?


gsap.from(element, {
    clearProps: "all" // note: "scale" (or any transform-related property) clears all transforms


You may enter a comma-delimited list of property names into clearProps that you want to clear from the element’s style property when the tween completes (or use "all" or true to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes. clearProps also clears the "transform" attribute of SVG elements that have been affected by GSAP because GSAP always applies transforms (like x, y, rotation, scale, etc.) via the transform attribute to avoid browser bugs/quirks. Clearing any transform-related property (like x, y, scale, rotation, etc.) will clear the entire transform because those are all merged into one "transform" CSS property.

Link to comment
Share on other sites

I can't really figure out the issue - a minimal demo would be really helpful

Link to comment
Share on other sites

Ah clearprops seems to work great. Thanks a lot I didn't know about it.

  • 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.