cotton Posted May 14, 2021 Share Posted May 14, 2021 Hello all I've got a bit of an issue that I can't get my head around. I have some text that, on page load I have animated in (y & autoAlpha). Once completed and the user scrolls I would then like this same text to animate y & autoAlpha of the screen when reaching a certain point. Currently the intro works fine but then as you scroll off the elements just seem to disappear and don't reappear when you scroll back. Looking at the inspect it would seem the lines are given the initial y:300 transform. It feels like the two gsap animations are competing with each other. Any ideas? James note: Try the pen on CodePen rather than the embed to see it affecting more than just the top line See the Pen GRWZBJO by Cottonltd (@Cottonltd) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted May 14, 2021 Share Posted May 14, 2021 Hi @cottoncreative, As I don't see anything related to a progress bar in your markup, I'm going to ignore that for now (I can help with that if it is an issue). Also, I'm going to show you how to hook up scrollTrigger to a timeline and how you can make use of "pin" to pull off what I think you're looking for. (as you stated, reviewing in a larger CodePen window is ideal) See the Pen GRWZXRP by sgorneau (@sgorneau) on CodePen Hope this helps! Shaun 1 Link to comment Share on other sites More sharing options...
cotton Posted May 14, 2021 Author Share Posted May 14, 2021 (edited) Hi Shaun Apologies, the progress bar is probably more key than I had anticipated. I've added it's styling etc into the original pen. Essentially, the text wipes in after the progress bar has completed (on page load) so that is all part of the non-scrollTrigger part. It's only once that TL has played that the copy needs to be controlled by scrollTrigger. I tried adding the scrollTrigger into the progress_tl but it didn't work. Thanks James note: I've also changed the y:300 to y:100 to aid the pen being viewed directly in the embed. Edited May 14, 2021 by cottoncreative Added a note 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