Red Bag

I tried using UIKit's "uk-scrollspy-nav" to control the staggered cards. It successfully scrolls to the respective sections, but when clicking the Section 1 menu to scroll back to Section 1, Section 2 will overlap Section 1. Anyway to add the navigation menu to control the staggered cards?

Thanks for your help~

https://codepen.io/redbad/pen/YzZRYvd the number 248 and 64 without decimal and comma, the animated not workable

Great, that's what i need. But i found out if the number without decimal or comma, the counting animated was not workable.

Do i still need to edit the code after to insert the above code? https://codepen.io/redbad/pen/YzZRYvd I'm trying to do the counting by on scroll but it's seem to scroll once to trigger the animation, how to let it to animated again when scroll to each number?

How to include comma and decimal?

Sorry as I english not good to explained what i mean. Anyway, thanks for your help.

That's great, but if the number without decimals or some of number we wish not to have more than 1 decimals, how can we hide it ?

Sorry Jack, I found out when the number had " , " (comma), the horizontal scroll will broken and the below code will change the comma to dot. onUpdate() { count.innerText = parseFloat(count.innerText).toFixed(2); } https://codepen.io/redbad/pen/MWJPxgO

Thanks a lot~

How to display running number (having zero in decimals) as now the code not able detect the zero. example: 1.60 and the code only able to display 1.6 https://codepen.io/redbad/pen/poRxgLo

Yes, the codepen not show the issue? or you can refer this link http://novafusion.asia/development/tm/test.html Here is my codepen demo same with the above link. https://codepen.io/redbad/pen/gOgXKdJ If CSS issue, i can't set the overflow: hidden for whole container because it will affect the horizontal scrolling.

Thanks for your reply. I did do a demo in codepen, but it can't view the problem what i ask. Perhaps you can refer this (https://cdpn.io/redbad/debug/gOgXKdJ/yokZEpDeVzmA) to view the problem when scroll horizontally from start to end, the website not fit to the browser. The problem was just happen in Google Chrome and Safari. As you still not understand, here's the reference, when scroll till the end, it's seem still can scroll over to see the white space. https://codepen.io/redbad/full/gOgXKdJ

Hi, As an example : https://www.manuport-logistics.com/en we have checked and this website is not fixing a width for those section, however, the content still able to display nicely in frontend. But for our project, the content will distorted if we do so. Besides, we come across another issue in Google Chrome , when we try to scroll horizontally from start to end by using mouse, the screen will be abit jumpy. You may please refer to attached sample site : http://novafusion.asia/development/tm/test.html This issue happen in Google Chrome and Safari only. Firefox seems fine. Appreciate if you can advice on above issues. Thank You

Hi, I facing a problem, due to the number's length, the counter number animation in slider become not stable and seems like "vibrating". Any solution ? https://codepen.io/redbad/pen/xxRYOBr

Hi, Thank You for helping. For what I'm trying to say is when we try not to fix the width, the content is cut off half way in responsive devices. However, when we fix the width , the content looks odd , as there is lot of spacing display in big screen. Is there any other solution that not to fix the width (so the content auto adjust based on different screen size). Thank You

Hi, is it must fixed a size for each section in horizontal scroll? What I'm facing was when responsive the width of each section will be affect the content. Do any idea to do not fixed size for each section? I'm using UIKIT framework. As you can refer the reference below, uikit grid is not full width with the section.

May I know how to use Scrolltrigger to trigger number animate when scroll?

Thanks a lot for all your help~

I am grateful for all your support. I'm new to learn GSAP, hope you all don't mind I got many question. One more question, if the section got more than 2 numbers, how it could do for all to animated? And the animation was done once only, can it be loop when scroll to right again? https://codepen.io/redbad/pen/xxRYOBr

Yes, this is what I mean but i found a problem, if the first section don't had the number animation, the rest of the number animation is not working when scroll to. https://codepen.io/redbad/pen/xxRYOBr

I had tried to use gsap to do the number animation but still can't to do as when scroll to start the animation. https://codepen.io/redbad/pen/xxRYOBr

Yes, when it first enters from the right. When scroll to the right section, the number will start counting animation

Here is my demo. https://codepen.io/redbad/pen/xxRYOBr When scroll to next section the "Number" will do countup animation not for starting to animated only.

Hi @mikel , thanks for your reply but that's not what i need. What i means is when horizontal scrolltrigger to the number and the number will do countup animation.