[scrollbar extend according to page scroll.]

thank you Cassie, that's exactly what I need. and also new info I got, I appreciate your help a lot.

 

[scrollbar extend according to page scroll.]

hello,

I want my custom scrollbar div to keep extended ( 0 - 100% ) according to page scroll.

the markers is activated the animation according to the view port, but as I want to have the custom div grow ( the height ) I can make the trigger any div on my page and when it reach the markers its working, but I need that to apply on the the page, so its start increasing ( the height directly when I start scroll down from the top until I reach end of page 0 - 100 height.

 

sorry for my English if its not perfect clear.

See the Pen ExmvgrK by Mohamed-Gad (@Mohamed-Gad) on CodePen

[issue with popup menu]

Thanks alot for the information, i will definitely considering your advice. 🤩

[issue with popup menu]

Hello,

I have an issue with my popup menu, everything is working except when I'm on the very bottom of the page and click on the menu button, the menu popup appear normally but, also scroll all the page up.

is there any way to prevent the scroll top that happen when I open the menu while I'm on the bottom of the page.

Thanks for help in advance.

See the Pen VwpQObE by Mohamed-Gad (@Mohamed-Gad) on CodePen

[Reset The Animation]

Sorry for the inconvenience, I will create it on codepen and post it. thanks again.

[Reset The Animation]

after hover the box as examples posted before the white overlay edges below the black overlay is revealed and give the feel the box have a border which is not what I want. 

thanks for help in advance.

 

[Reset The Animation]

hello again,

I have an annoying issue with this topic I was trying to fix it as it looks easy but I tried lot of ways but didn't able to fix it.

after the black overlay take higher z-index , the white overlay edges which is below it shown as the example on the attached image. 

both are 100% width and highest and both took same position: absolute left & bottom: 0, I don't understand why that happen.

my page background color is black.

can u advice

thanks.

 

[Apply Stagger inside forEach]

Thanks Cassie For your Help, I appreciate it.😍

[Apply Stagger inside forEach]

Hello,

I used forEach to apply animation on multiple divs with same class, I just want to add stagger between them, I tried on the tweens it self but it didn't work, I have no clue where should it applied, probably there is easy solution's , sorry I'm a beginner.

 

Thanks in advance.

See the Pen RwppZjV by Mohamed-Gad (@Mohamed-Gad) on CodePen

[Repeat the animation on other sibling div's]

Thank you for your quick response and help and also for the reference links.

   I Appreciate it. 

[Repeat the animation on other sibling div's]

Hello, I want to have the first div animation applied on other divs in the same container.

all divs have same classes and same content.

is there any way to repeat the animation for each div when mouse enter and mouse leave instead of rename all classes and duplicate the codes over and over.

 

thanks for helping. 

See the Pen MWpbYVa by Mohamed-Gad (@Mohamed-Gad) on CodePen

[Reset The Animation]

That's Amazing!

the Code is a bit confusing for me but its really what I was looking for, thank you so much for your help.

 

I appreciated.

 

 

[Reset The Animation]

Hello,

 

The Animation That I Want To Achieve is Already Work When I Hover On The Top <p> And When The Mouse Leave it ( That's For That First Time Only ), But I Want The Sequence To Start over Everytime I Hover Again And Mouse Leave. 

I Don't Want To reverse it.

 

Thanks.

See the Pen XWMJEoP by Mohamed-Gad (@Mohamed-Gad) on CodePen

[onMouseEnter]

ah u added paused :true 

ok that's what i was looking for , thank u a lot Carl.

sorry I'm still beginner.

[onMouseEnter]

its not react with me like that let me check aging ur code 

 

[onMouseEnter]

on page refresh I want it to invisible.

then when I hover over the div it get visible.

 

the img now broken for some reason  don't know why but when u refresh the page u will see it appear even with opacity : 0 inside CSS.

 

its simple code but i will add more animation but its appear like that so i want to fix it before go on with other stuff

[onMouseEnter]

hello,

code is working as I want but I want the <img> to be hidden on page refresh  as I set it inside CCS with opacity:0 and then turned to opacity:1 when hover on the div which it did ,

but the page it self on first refresh is Displayed the image and it should be hidden.

See the Pen bGgpGzM by Mohamed-Gad (@Mohamed-Gad) on CodePen