GSAP timeline - ScaleX disappears

[Galanthus88]

Hi,

I don't have a codepen URL because I am working in a WordPress environment with Webpack which compiles my code.

 

I am trying to animate a complete div from the left side to the right side with "scaleX". I have applied this to the "search__content" div.

But for some reason at 50% it disappears and is not showing anymore.

 

Animate with scaleX from the left to the right - 0% to 100%.

 

This is my SCSS:

        &__content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            // visibility: hidden;
            // overflow: hidden;
            max-width: 80%;
            margin: 0 auto;
            transform: translate(-50%, -50%);
            transition: all 0.5s;
            transform-origin: left;
        }

 

 

	const tl = gsap.timeline({
        defaults: { ease: 'ease', duration: 0.6, delay: 0 }
    });


	tl.to('.header', { y: -30 });
    tl.to('.header', { opacity: 1, y: 0 }, '-=.2');
    tl.to('.search__image', { y: 60 }, '-=2');
    tl.to('.search__image', { opacity: 1, y: 0 });

    tl.to('.search__content', {
        scaleX: 1,
        transformOrigin: 'left'
    });
    tl.to('.search__content', {
        scaleX: 0,
        transformOrigin: 'left'
    });

 

[akapowl]

 

Hey @Galanthus88

 

A minimal demo could have been just the code you have posted applied to a certain element - like this:

 

See the Pen 0615bd2727b493c4421fc063a3f48e1f by akapowl (@akapowl) on CodePen

 

Your issue seems to be related to having CSS-transitions set to the element you are tweening on, which interfere with the tween.

Removing the transitions seems to fix the issue.

 

See the Pen e1dc3b17e9d1d531c08c3130169c7718 by akapowl (@akapowl) on CodePen

 

Is this what you intended?

 

[Galanthus88]

1 minute ago, akapowl said:

 

Hey @Galanthus88

 

A minimal demo could have been just the code you have posted applied to a certain element - like this:

 

 

 

 

Your issue seems to be related to having CSS-transitions set to the element you are tweening on, which interfere with the tween.

Removing the transitions seems to fix the issue.

 

 

 

 

Is this what you intended?

Thank you so much!!!!! Yesss!!!!!!

1 minute ago, akapowl said:

 

 

[akapowl]

Sidenote:

 

If you first want to scale it in, you'd have to set it to scaleX(0) in the first place - either via CSS or via JS

 

See the Pen d1606ac4e59df8b92dba2d0de722186b by akapowl (@akapowl) on CodePen