Jump to content
Search Community

ScrollTrigger and position absolute element

Jacky Yang test
Moderator Tag

Recommended Posts

Hi @Jacky Yang, welcome to the forum!

 

The start and end values are something you really have to play with to get them right. I have updated your pen and moved them around a bit, to something that works with your pen. Right now the start is when the the `.cards` (with a offset of your  `y` tween) are in the middle of the screen and the end is when that same element hits the top of the screen, this is half of the browser height, so the time the animation takes to complete is the time it takes to scroll the half of the browser height. You can increase or decrease that space to have them animate faster or slower 

 

I also change the logic of your pen where instead you create a ScrollTrigger for each of your cards I just create one ScrollTrigger. Within there I have a timeline which animates your cards one by one using a stagger. This way you have just one timeline to manage with your ScrollTrigger which makes tweaking things easier. 

 

See the Pen xxYBQYX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

Ah, then it gets a bit more complicated. The animation can stay kinda the same, but I would change the layout. Instead of them overlapping by default I would lay them out how they should look like if there was no animation. Then with the animation code calculate how much they need to move until they overlap each other and animate from that position.

 

Instead of using known values you can use function based values in the animation. I know the height of the card (maybe you want to calculate that on page load if the card height changes when with page size, but for now its 500px)  here is the line of code that gets a bit more complicated

 

y: (index) => height * (cards.length - (index + 1))

The height of the card is `500`, there are in total `3` cards and the `index` is the number of the card (`1`, `2`, `3`), so for the first card this calculation is `500 * (3 - 1) = 1000`, so this card moves from a `1000px` to its end value. And the second one `500px` and the last one `0px`. Then I do the same with the duration, something that needs to move `1000px` needs more time than something that only moves `500px` and the stagger is also calculated to be timed with the duration of each card. 

 

You can still do a lot with the timings of the start and end values of ScrollTrigger, but I leave that to you and maybe you want to get the height of the card dynamically, because for the end product I don't thing `500px` is the perfect size for all screen sizes. Good luck.

 

See the Pen NWyZewQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

Hi @vivek_tamore_91. I'm struggling to understand what you're trying to do there. ScrollTrigger is doing exactly what you've asked it to do (from what I can tell). There's a bunch of space there because you did a .from(element, {y: 1000}) for example, so that first element is pushed way down on the page. If you don't want there to be space there, then don't push the element down using its "y" property. 

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