Jump to content
Search Community

ScrollTrigger.batch - positioning

zofia test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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 🙂

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

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. 

 

 

 

illustration-corrected.png

  • Like 1
Link to comment
Share on other sites

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?

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

 

 

window-resizing.jpg

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