rimedtades Posted February 18, 2022 Share Posted February 18, 2022 I want processes to start after black goes above orange and <div class="panel blue"> Contant 1</div> <div class="panel red">Contant 2</div> <div class="panel orange">Contant 3</div> <div class="panel purple">Contant 4</div> the contents overlap I can fix this problem See the Pen jOaZwmL by rimedtades (@rimedtades) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 18, 2022 Share Posted February 18, 2022 Hi rimedtades, I'm really unsure what you're asking. Can you explain in more detail about your issue? Link to comment Share on other sites More sharing options...
akapowl Posted February 18, 2022 Share Posted February 18, 2022 I'm also not 100% sure what you're asking but I do know that this example is from another thread and as it is based on a fork from another user's example, you probably shouldn't see it as a perfect pre-made template as it does have some flaws to it that were not changed in the process of suggesting this concept for the ScrollTriggers - e.g. only elements with the .orange class will have flex set in that example. I changed that here to apply to all .panel elements and added an overflow: hidden to the .panel as well, which I think might be what you were lookin for (with regard to the elements overlapping)? If you want things to start at a different points in scroll, you can tinker with the start (and end) values of the ScrollTriggers and/or the durations and position parameter of the tween(s) in the timeline(s). See the Pen VwrQMMB by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
rimedtades Posted February 18, 2022 Author Share Posted February 18, 2022 first of all i'm so sorry. I am trying to improve my English 😅 actually i'm trying to do exactly that: https://streamable.com/01wmiz @OSUblake @akapowl Link to comment Share on other sites More sharing options...
akapowl Posted February 18, 2022 Share Posted February 18, 2022 Well, that actually looks like quite a different animation-setup altogether - and as the forum guidelines state, these forums are not intended to deliver ready-to-go custom code solutions for all sorts of effects asked for. You will have to do some things a bit different, starting with your general setup - maybe think of what it is supposed to look like when the animation is done at first, and set it up like that in your HTML/CSS - maybe with the panels positioned absolute with their top values according to that offset you need to have for them to look stacked like that. Then set a translation on the y to each of them so they are off canvas to the bottom before the animating starts. Often a good start to getting such scenarios to work with ScrollTrigger is to first get the animation done without thinking about the ScrollTrigger at first. So you could e.g. first create a normal timeline with what your animation is supposed to be doing - in this case tween each panel to 0 on the y parameter one after the other (and the respective text(s) positioned on that timeline accordingly via the position parameter) - and then, when you've got the animation done to your liking you can attach it to a scrubbing ScrollTrigger e.g. 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