zofia Posted April 9, 2021 Share Posted April 9, 2021 Hi, I am at the beginning of my adventure with javascript and GSAP, so please be understanding :). I want to make some animations on elements that decrease in height when they enter the viewport. On the same page I'd like to use ScrollTrigger.batch() on other elements but have some difficulties with positioning them. On the pen attached () the orange items load too late, in other words they appear too high above the bottom viewport line). If I delete the blue animation, they load correctly from the bottom (See the pen: See the Pen jOyaJaL by zofiaifoz (@zofiaifoz) on CodePen ). It looks like the initial height of the blue element is the issue here. Could anyone give me a hint how to fix it? (The orange elements should appear immediately under the blue element after it finishes the animation). I would appreciate any help. Thank you! zofia See the Pen GRrOPJW by zofiaifoz (@zofiaifoz) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 9, 2021 Share Posted April 9, 2021 Hello Zofia! There may be a more clever way to approach this - but the main issue is that your layout is shifting by 600px so the start trigger for the blocks is 600px below where you need it to be. You can use relative values to define where the start of the trigger is positioned This says start when 600px before the top of the element hits 60% of the way down from the top of the scroller. ScrollTrigger.batch(".card", { onEnter: (batch) => gsap.to(batch, { autoAlpha: 1, stagger: 0.1 }), start:`-=600px 60%`, markers: true }); I've tweaked this pen and added some markers in for you. See the Pen 047b6e1a66d57b5fb30da6ffce7f3791 by cassie-codes (@cassie-codes) on CodePen Hope this helps 🙂 1 1 Link to comment Share on other sites More sharing options...
zofia Posted April 10, 2021 Author Share Posted April 10, 2021 Thank you Cassie. It is exactly what I wanted to achieve 😊 But things get more complicated when I want to use more elements right? Look at the attached pen: See the Pen YzNYKmB by zofiaifoz (@zofiaifoz) on CodePen and illustration. What would be the best way to do that? Ah, and ideally I'd like to use "vh" instead of "px", is it possible? I would appreciate any tips. 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 11, 2021 Share Posted April 11, 2021 Hi Zofia. Thanks for this diagram! 🙂 I'm not really sure what the visual effect is you're going for here though. From the diagram, the animation of the block heights is occurring before they're even visible. It seems like a lot of browser layout calculation for very minimal rewards. I think this is doing what you're after? See the Pen YzNYKmB by zofiaifoz (@zofiaifoz) on CodePen The pixel offset value is the same as the amount that the first block's height is changing by. So you could use vh if you decreased the height with a scale transform? But that may not work as it'll squish the contents. Again - not sure what the visual effect is you're going for, maybe that would be fine? 4 Link to comment Share on other sites More sharing options...
mikel Posted April 11, 2021 Share Posted April 11, 2021 Hey @zofia, Maybe this could be a way See the Pen qBRxdEa by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
zofia Posted April 12, 2021 Author Share Posted April 12, 2021 Thank you @Cassie Thank you @mikel I'm going to try out your suggestions and will be back with results. In the meantime, for a more complete picture, I attach a simple concept of the project and also an animated gif showing (hopefully) what effect I want to achieve I use Svelte for this project. I divided it into components (based on sections). Animated elements are just part of the design concept and have no content, just graphics (svg). My attachments exceed the max total size, so here's the link: https://gracious-brown-97593d.netlify.app/ Best Zofia 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 12, 2021 Share Posted April 12, 2021 In that case definitely animate using scaleY instead of height! 🙌 It'll be more performant and you can use vh easily too 3 Link to comment Share on other sites More sharing options...
zofia Posted April 12, 2021 Author Share Posted April 12, 2021 @Cassie when I use scaleY the animated elements cover the sections that are below them. The sections remain fixed and I wish they would flow up with the animation). Any ideas? Here is the pen: See the Pen NWdyVVV by zofiaifoz (@zofiaifoz) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2021 Share Posted April 13, 2021 Ah, yeah, that's some bad advice on my part - looks like height is the way to go. 2 Link to comment Share on other sites More sharing options...
zofia Posted April 15, 2021 Author Share Posted April 15, 2021 Thank you @Cassie In that case I will use heights. I noticed that I need to calculate the start positions for all items. It is not very convenient (I have many sections and different heights). I believe that with time I will find a better way to do it. However, I have one more proble here: the start positions become incorrect on window resize. When I reload the page it's ok again. Is there a way to fix it? Here is the pen: See the Pen jOyzgyB by zofiaifoz (@zofiaifoz) on CodePen Just resize the window to see it. Link to comment Share on other sites More sharing options...
mikel Posted April 15, 2021 Share Posted April 15, 2021 Hey @zofia, An option could be to use data and to update per ScrollTrigger.refresh the start positions. See the Pen xxgzEmy?editors=1100 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
zofia Posted April 16, 2021 Author Share Posted April 16, 2021 Cool! It looks promising I will test this approach in my project and let you know if any questions arise along the way Thank you @mikel! 1 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