toby311 Posted March 21, 2021 Share Posted March 21, 2021 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 More sharing options...
PointC Posted March 21, 2021 Share Posted March 21, 2021 Hi @toby311 Welcome to the forum. I'm not seeing that behavior. It seems to work correctly for me. Are you seeing that in any specific browser or OS? FTR - I'd avoid using CSS animation and GSAP on the same element. Happy tweening and welcome aboard. 2 Link to comment Share on other sites More sharing options...
akapowl Posted March 21, 2021 Share Posted March 21, 2021 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 2 1 Link to comment Share on other sites More sharing options...
toby311 Posted March 21, 2021 Author Share Posted March 21, 2021 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now