gregor Posted October 16, 2023 Share Posted October 16, 2023 Hi, I have an animation where a circled mask reveals some content. After the mask animation is finished, I want the list to scroll to the end, then remove the pin and continue scrolling the whole module. My problem is that scrolling through the list starts too early or too late.... I played around with the start value, but 'center' starts too early and if I use something else like '60%', the start is completely off compared to the 'center' value. See the Pen VwqOgQw by destroy90210 (@destroy90210) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 16, 2023 Solution Share Posted October 16, 2023 Hi @gregor I've edit your pen. Personally I've found that you hardly need more then one ScrollTrigger, also here, I've combined your 3 ScrollTriggers in to a timeline with just one! I've also posted some comments in your JS be sure to read through them. It works here, so you don't need to fix it, but animating width and height is not so performant, I would make your mask 142vmax units and then scale it from 0 to 1, check out this awesome tutorial from our own @Carl https://www.creativecodingclub.com/pages/free-lesson-vmax Hope it helps and happy tweening! See the Pen ExGzJpb?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
gregor Posted October 16, 2023 Author Share Posted October 16, 2023 wow thank you so much for this great support 1 Link to comment Share on other sites More sharing options...
gregor Posted November 3, 2023 Author Share Posted November 3, 2023 hi @mvaneijgen hope it's ok to ask you again How can I pin the left box after the mask animation is over? I tried it but I failed So that the right column scrolls to the end only with the standard scroller. that would work better later with my mobile version. And if it's not a timeline for both animations I have more control of how much time the mask effect should take this was my attempt See the Pen bGzBEgx?editors=1010 by destroy90210 (@destroy90210) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 4, 2023 Share Posted November 4, 2023 I don't know what the question is. In my demo the box is pinned, so I don't know what it is you're doing now. If you want things differently on mobile devices check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia() with it you can build media like queries, voor GSAP/JS Link to comment Share on other sites More sharing options...
gregor Posted November 4, 2023 Author Share Posted November 4, 2023 Sorry, I wasn't precise enough. First I want to split the animation from one timeline to individual scroll triggers because then I have more control over the individual durations. Or is this also with your solution possible? because now the duration is end: "bottom+=100% center" but I can't controll how much of this +100% should take the mask effect and how much the y scrolling of the list. The second part is why I want to pin the black box after the end of the mask animation instead of the whole module is that the list can then be scrolled with the natural scroller instead of moving it with yPercent. Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 5, 2023 Share Posted November 5, 2023 20 hours ago, gregor said: First I want to split the animation from one timeline to individual scroll triggers because then I have more control over the individual durations. That is not that easy, it could be done, but that requires a lot of thinkering. Feel free to go that route. 20 hours ago, gregor said: Or is this also with your solution possible? Sure it is possible, the only thing is that ScrollTrigger maps the whole timeline duration to the scroll distance. Lets say you have a scroll distance of 750px and you want one thing to animate over 250px and the other thing over 500px. You will have to set up the duration on the timeline that something equals one unit eg 1 second and the other 2 units eg 2 seconds. Here is your demo, where the scroll distance some value set it to 2.74 times the window height, but as you can see you can make it what ever you want. The grow animation takes 10 seconds and the scroll takes 1 second so 1/10th the duration. As you can see the first tween is really slow and the second tween really fast, with the explanation above this is how you can tweak your ScrollTrigger to time everything exactly how you want. See the Pen yLZVwEj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Quote The second part is why I want to pin the black box after the end of the mask animation instead of the whole module is that the list can then be scrolled with the natural scroller instead of moving it with yPercent. That is possible, but probably requires a rewrite of your HTML structure, you're using tailwind of which I'm not a fan and have no knowledge, so I can't easily thinker with your HTML and CSS. I've removed some of your HTML and CSS and as you cans see the el_list element is bigger than it can now scroll with yPercent: -100, I have the feeling this is because you're giving it a height with some tailwind class that is not correct. 1 Link to comment Share on other sites More sharing options...
gregor Posted November 5, 2023 Author Share Posted November 5, 2023 thank you for your reply. I have used different values for the duration but it won't see have any effects on the animations. It looks for me the same if I replace 10 with 50 or 100. Other question the value 2.74 should just show that I can use any value? Or is this a magic number ? Link to comment Share on other sites More sharing options...
GSAP Helper Posted November 5, 2023 Share Posted November 5, 2023 I'd strongly recommend that you read this: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#how-does-duration-work-with-scrub-true When you have scrub enabled, it just has to fit the whole animation between the start and end scroll positions. So if you want it to last longer, you need to make the distance between those greater. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now