YBP

Thank you very much for your explanations and examples! I'm thinking of joining the club soon

Hi, thank you very mutch for your help. Yes, like Jack your answare help me to understading the way ScrollTrigger work. It's really cool, thank you. What I mean (sorry for my weak english), is to make #nav follow the window resizing move while resizing. Now it move after stop resizing. When I use onUpdate for removing #nav css top, it do the trick after we return back to the first position, witch is not the case with the onLeaveBack method (I don't know why). For reproducing the differences : 01. Before scrolling, I resize the window vertically : #nav follows #intro's height 02. After scrolling, come back to initial position : #nav follows #intro's height (in my first example it doesn't) 03. After scrolling, #nav between start position and end position : #nav doesn't follows #intro's height until Istop resizing the window. I'm trying to make the #nav follow the movement of the resizing whil we do it. Thanks for your help !

Hi @Jack and thank you very mutch for youre repply, it help me a lot to understand gsap mecanics. It is exactly what I was looking for / the simpliest way to do that before to come and ad any resize functions ect. If I give css:top to #nav, it's because in the real application, the "75vh" #intro height is rounded on my font base line, so it's never really 75vh. But I can manage it another than give the #intro's height. For the "almost" final result, I added a small piece of code so that the css:top value of #nav returns to "(empty)" onRefresh, if #nav's css:top = #intro's height. This allows me to update the #nav animation on window's resize. If there is a more direct way to achieve this, that would be my pleasure, but I'm not asking for that much, thank you very much: example : https://codepen.io/Ybperhaps/pen/XWopgWX Now I'm looking for a way to update the scrub in the same time I resize the windows and not after the end of resizing !

Hello everyone, I'm looking for the right way to use the animation feature with ScrollTrigger and scrub option. I made a little demo. I modify the css:top value of #nav on scroll. The starting value is variable (#intro's height), and the ending value is fixed. Everything went well until I resized the page in height. The trigger seems to notice the height change (#intro's height), but the position returns to the first value after the resize. This only happens when I resize the page in height, and the position of #nav is at the start of the animation. So I suppose that the starting value is kept somewhere... Sorry if it's a stupid question ? Any help would be welcome. THANKS !

Hello all, My problem seems to come from the "smoothScroll" function function, so neither ajax load nor the loader, but the "content height" value which does not update when I try to refresh scrollTrigger. I need to try this before the animation skips, so I'll move and adapt my question into the original topic. Thank you again for your help !

Thank you for your answer and advice, I understand the idea well and would be careful not to ask too much! The goal was indeed to describe the entire project so as not to go too far. I'll come back with a more concise example and a clearer question. Thank you again!

Hello everyone ! I'm new in this community and I'm trying to adapt some examples to my needs. this example here is my starting point (thanks to Jack for this working example) : But I post my question here because of the subject of this topic. So, I need to : - load ajax content onLoad (function addBoxes(x)), - create a scrollTrigger (loaderBoxTigger) on some box (ex: the nth-child(-3)), for next ajax load onEnter - load ajax content onEnter into the box (ex: the nth-child(-3)) (function addBoxes(x)), - recalculate the height of container (ok !) - remove the scrollTrigger from old nth-child(-3) and applies to the new one in place, for next ajax load onEnter (ok !) - (try to avoïd the "jumping effect" when refresh and scroll same time) - do the snap with the new content ... - in the future, I want to remove/delete previous loads boxes at the top of the container, for a light infinite scrolling ... there is my test : https://codepen.io/Ybperhaps/pen/BamVxdL If someone has some big ideas it will be great. Thanks you Ybp