Jump to content


ScrollTrigger Help

Recommended Posts

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

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

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


  • Like 2
Link to comment
Share on other sites

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.


  • 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.