Jump to content

Jacky Yang

ScrollTrigger and position absolute element

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

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!

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

@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?




Link to comment
Share on other sites

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

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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.