Jump to content
Search Community

GSAP and CSS animation problems

toby311 test
Moderator Tag

Recommended Posts

So I'm trying to create a page loader animation. The idea is the loader will run for at least 2 second + loading time, and at the beginning of the animation, the word is slide up to the middle of the screen, then wait until the page is completely loaded, then the word slide upward, out of the overflow: hidden parent div to invisible. 

I tried have the first part of animation in CSS, so it starts as soon as possible. And the second part in GSAP. However, the second part of animation doesn't run as expected, instead, it moves down by 100px, instead of translateY(-500px) inside GSAP code. What is the possible cause and solution for this problem?

See the Pen MWbNdxy by ntobyh (@ntobyh) on CodePen

Link to comment
Share on other sites

7 minutes ago, PointC said:

I'm not seeing that behavior.

 

For me it's the following:

 

Win 10 - latest Chrome / latest FF - no issue to be seen.

Latest Opera: issue to be seen as described by Toby.

 

If I use y: -500 instead of transform: 'translateY(-500px)' in the tween though, the issue doesn't appear on any of those browsers mentioned.

 

Does that work better for you @toby311 ?

 

See the Pen 02134066f07c036a8e1fa626ecac519e by akapowl (@akapowl) on CodePen

 

 

 

As already mentioned by @PointC it would probably be best to avoid mixing CSS and GSAP animations on the same element altogether.

 

Welcome to the forums :) 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

I see! I test it again on Chrome and it works as expected! I develop the website on Opera and forgot to check again on another browser. Thanks for your help @akapowl

 

Thanks to @PointC suggestion, I create a GSAP above the setTimeout to animate the first part and it works fine on both browser!

  • Like 2
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.
×
×
  • Create New...