Jump to content
Search Community

ScrollTrigger Help

rimedtades test
Moderator Tag

Recommended Posts

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