GSAP 3D animation on scroll using scrolltrigger in next app

Israr · February 1

Hi @Team
I have created a 3D gallery in Next js it's working fine but I have an issue when I want to show half of the items by default and show the remaining item on button click but it's not showing smoothly.
Can you please help me how to show rest of items smoothly when clicked on button
Thanks!

sendbox link:

GSAP Helper · February 1

You had placed your code sandbox link in the Codepen URL, we've fixed that for you. Also what is the file we would be looking at (which has the GSAP code)?

Israr · February 1

Thank you for your assistance,

Can you please open the result in the new full screen tab and then you can see that two columns grid will be shown there. and then click this in the "Show All" button while scrolling on the second section,
This animation I used in Card component.

GSAP Helper · February 1

When I click that link, I get:

Quote

Devbox not found
It's likely that the Devbox you're trying to access doesn't exist or you don't have the required permissions to access it.

🤷‍♂️

Israr · February 2

Thank you for your reply,

Now I make the dev box public, you can now check this.

Cassie · February 2

Afraid it's not working. If possible I would advise setting up a very minimal example in codepen, just vanilla js, coloured boxes and the GSAP code. This is by far the fastest route to getting help with a GSAP challenge.

See the Pen xxBPOzW?editors=1010 by GreenSock (@GreenSock) on CodePen

If your problem is related to next then you can use StackBlitz
https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

Israr · February 2

Thank you @Cassie for helping me to make a perfect demo for you, below is the link:
https://stackblitz.com/edit/stackblitz-starters-u2y6hj?file=app%2Fcomponents%2FCards%2Findex.js

Now you can check the component Card. I have made a 3D gallery on scroll I am showing half of the cards by default and I am showing the rest of the cards by clicking the "Show All" Button. but the rest of the images are not showing smoothly and the scrolltrigger moves 2 cards before jumping also the start and end positions have increased. when showing half images the scrolltrigger ends right but when showing all cards the third section is showing deeper

Thanks!

Rodrigo · February 2

Hi,

I've read your last post a few times and went through your demo and honestly I don't really know what the issue is here. If you set markers to true in your ScrollTrigger instance you'll see that the markers are right where they should be, so there is no issue there.

1 hour ago, Israr said:

when showing half images the scrolltrigger ends right but when showing all cards the third section is showing deeper

Maybe the problem stems from the calculation you're making to set the height of the scrollDist element. On that note, why not just use ScrollTrigger pin feature for this and position all your cards absolutely on that section for large screens? Seems like a far more intuitive and simple approach than the one you have now, which IMHO is quite convoluted.

1 hour ago, Israr said:

clicking the "Show All" Button. but the rest of the images are not showing smoothly and the scrolltrigger moves 2 cards before jumping also the start and end positions have increased.

That totally makes sense even if you remove all this:

ScrollTrigger.clearScrollMemory();
ScrollTrigger.refresh();

When you add new elements the DOM gets updated and even if you don't re-run your logic in the useLayoutEffect (which you do based on the dependencies array you have) there will be a resize event triggered which will lead ScrollTrigger to run all of it's calculations again. In this case everything gets reverted and the code runs again so GSAP and ScrollTrigger will run all the calculations again. When that happens ScrollTrigger will reset the progress of the timeline based on the current scroll position, so that jump you mention is to be expected, also it seems that the array being rendered in the DOM gets kind of shuffled when you click that button, so some elements that weren't present in the DOM before are now above the fold so that translate in that particular jump. When you initially run the code Card 1 is the first, after you click the button Card 8 is the first, but that wasn't in the DOM before, so it's completely logic to have that jump as well since, not only you're changing the order to elements and appending new ones, but the rendering is getting shifted. Again this seems odd and convoluted IMHO.

Finally you should use our useGSAP hook in order to make all this simpler and easier:

https://gsap.com/resources/React

Hopefully this helps.

Happy Tweening!

Israr · February 26

Hi @Rodrigo,

Thank you so much for your clarity.

I have implemented your suggestions in the demo (https://stackblitz.com/edit/stackblitz-starters-u2y6hj?file=app%2Fcomponents%2FCards%2Findex.js)

but I am facing some difficulty with the remaining cards they are animating but not with the scroll trigger.

Can you please help me with this?

Rodrigo · February 26

Hi,

I'm not sure I follow exactly what's going on here or what's the issue you're having, but I recommend you to use our useGSAP hook with a dependencies array and the revertOnUpdate flag as well in order to re-create everything when the state changes and the new elements.

It makes no sense to me to have all that code in the handleShowAllCards method in your demo. I just would render the new elements by adding the rest of the cards to the array using concat and not run all that funky logic with slice and all that stuff, and create the GSAP and ScrollTrigger instances inside the useGSAP hook and not in the method. Use the method just to update the state, nothing more.

Happy Tweening!

Israr · April 2

Hi @Team,

I've followed @Rodrigo's guidance now and am very happy with the outcome. Thank you for that.

Although the result is pretty smooth, I'm facing troubles with setting the `end` value of ScrollTrigger.

As you can see in the demo (open in new tab), there is a lot of blank space after all the cards are already scrolled through.

This space is consistent if we show all cards or stick with the original 4 because I'm using opacity to hide the rest.

Now, I'd appreciate it if I get help on

1. Removing this blank space. The section should be scrolled right after the last card is scrolled through

2. Suggest a better alternative to using opacity (if there is). Originally, I wanted to show 4 cards, and all cards on the button click

3. What would be the best way to reduce the scroll speed?

Rodrigo · April 2

1 hour ago, Israr said:

1. Removing this blank space. The section should be scrolled right after the last card is scrolled through

Try using a smaller value for z in your animation, your cards are already not visible while their transform is still being updated by GSAP. Not a GSAP issue, you're passing a value that is just too big.

1 hour ago, Israr said:

2. Suggest a better alternative to using opacity (if there is). Originally, I wanted to show 4 cards, and all cards on the button click

Maybe autoAlpha (combination of opacity and visibility). Is there some kind of issue with opacity? If it ain't broken don't fix it, or as @mvaneijgen says: "If it works, it works" 🤷‍♂️

1 hour ago, Israr said:

3. What would be the best way to reduce the scroll speed?

@Cassie has you covered:

Happy Tweening!

GSAP 3D animation on scroll using scrolltrigger in next app

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members