Animation not doing what it is supposed to do?

[weinde]

Hello, 

I am really new to this GSAP and I am trying to create an animation that triggers when the page loads... what I am trying to achieve is that the smaller text goes from opacity 0 to 1 and "Fades Up" to his position. At the same time I want the SCROLL DOWN indicator to "Fade In" from the left...

My object just look like they bounce and they never go from opacity 0 to 1

 

I hope I explained well enough what I wish to achieve and wouldl ike some help please

See the Pen jOvNvqM by Weindorfer (@Weindorfer) on CodePen

[Rodrigo]

Hi,

 

Basically the problem is that you're using CSS Transitions on the elements that GSAP is also animating.

 

First: NEVER use transition: all in your CSS, any style update that can be animated will be animated and you'll end up with unwanted/unexpected results in your app.

 

Second: NEVER use CSS transitions on properties that GSAP is animating. As soon as GSAP applies a style to the element, CSS will fight for control of the element and the GSAP animation won't work as expected.

 

Once you remove all these from your CSS it seems to work:

transition: all 0.28s ease-in;

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

[weinde]

12 minutes ago, Rodrigo said:

Hi,

 

Basically the problem is that you're using CSS Transitions on the elements that GSAP is also animating.

 

First: NEVER use transition: all in your CSS, any style update that can be animated will be animated and you'll end up with unwanted/unexpected results in your app.

 

Second: NEVER use CSS transitions on properties that GSAP is animating. As soon as GSAP applies a style to the element, CSS will fight for control of the element and the GSAP animation won't work as expected.

 

Once you remove all these from your CSS it seems to work:

transition: all 0.28s ease-in;

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

Brooo thank you so much!! 👏