Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zofia

ScrollTrigger.batch - positioning

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 post
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 post
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 post
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 post
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 post
Share on other sites

In that case definitely animate using scaleY instead of height! 🙌

It'll be more performant and you can use vh easily too

  • Like 3
Link to post
Share on other sites

@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

  • Like 1
Link to post
Share on other sites

Ah, yeah, that's some bad advice on my part - looks like height is the way to go.

  • Like 2
Link to post
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 post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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!
 

  • Like 1
Link to post
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.

×