ScrollTrigger and position absolute element

[Jacky Yang 4 Likes (Newbie)]

I tried to copy this site's first three cards scroll effect with ScrollTrigger plugin, but I have some problem with the "start" 、"end" option, and they move to fast,  how to change it to implement this effect? Thanks!

 

 

See the Pen eYVXjKg?editors=1011 by jackyyang (@jackyyang) on CodePen

[mvaneijgen 1,726 Likes (Superhero)]

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

[Jacky Yang 4 Likes (Newbie)]

Hi, @mvaneijgen, sorry for the late reply, I'm working on another project these day.

Is there any way to keep card1,2,3 moving up over the view when scrolling down into scroller-start, and when scroll up working contrary just like the demo page ? Thanks!

[mvaneijgen 1,726 Likes (Superhero)]

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

[Jacky Yang 4 Likes (Newbie)]

@mvaneijgen  Thanks, that helps a lot !

[Dave Dublin 3 Likes (Newbie)]

@mvaneijgen that looks cool.

I've been trying to achieve the opposite of what you did, but I don't really understand the code completely.

So the first block appears and stops, then the next one overlaps, then the next etc.

A simpler version of this? https://weltio.com/about/

Do you have any pointers?

 

Thanks

Dave

[Cassie 5,397 Likes (Superhero)]

*note for @mvaneijgen - we're covering this in another thread so no need to reply here

[vivek_tamore_91 0 Likes (Newbie)]

how to remove that card  height when we stack on each other 

[mvaneijgen 1,726 Likes (Superhero)]

@vivek_tamore_91 please open your own topic with a minimal demo showcasing your issue

[vivek_tamore_91 0 Likes (Newbie)]

 

how to remove empty space before the card when we scroll

See the Pen QWrKqRY by Vivek-2001 (@Vivek-2001) on CodePen

[GreenSock 18,582 Likes (Superhero)]

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.