ghisleouf

Me again ... I've found a solution ... but not so clean ... the pen is updated Thanks for your amazing help.

Hi @Rodrigo Thanks for your answer and advices. I wanted to have the most complete example for you to see the issue "in-context", but anyway, I will come back with a simpler pen for sure. Actually, everything works pretty fine in my example and I read and played a lot with the pen you shared, thank you!!! The issue I'm trying to solve is mixing my different collection panels and having a footer after the component. In my scenario, I have 5 <collection> panel wrapped into a <collections> section element ... and then ... a <footer>. The problem I want to solve is that my <collection> panels are properly displayed but after reaching the last one, I want the page to scroll normally, reaching the footer and disable the Observer ...and re-activate on EnterBack. In your example, it is achieved using a ScrollTrigger on <swipe-section> which embed both panels and the section where you disable Observer ( which is the footer in my case). For backend integration reasons, I cannot wrap my <collection> panels AND the <footer> in a same parent <div> which triggers the ScrollTrigger ... and this is where I'm currently stuck ... not the animations, nothing else. I will come with a simpler example soon. Hope my issue is a little bit easier to understand. Thanks for your precious help. Best.

Hi there, Thanks again for your feedback. @Rodrigo, thank you for your example ... unfortunately, I tried to adapt it on my pen, but I failed. https://codepen.io/ghislefou/pen/BaGvvgK?editors=1010 I have a slight different constraint from your example: the footer must not be in the "sliding" collections section. I would be so pleased if you can find few minutes to see if it's possible on my pen to achieve what I want to do. Thanks a lot again.?

Thanks @Rodrigo I need to add a footer when the user reaches the last section and of course remove watches loop. Thanks for your ideas.

HI there ! Thanks all for your feebacks @Cassie, @mvaneijgen ! Here is what I did at the moment, just for you to understand my goal. (I've started before reading your messages) https://codepen.io/ghislefou/pen/GRwXdzm Currently, there is no footer ... and this is where it starts to be tricky !

Hi @Cassie Thanks for your feedback. May I ask you which strategy would you use, since you would not mix the 2 strategies ? Thanks a lot !

Hi there, I'm back with another question. This time, I'm asking before trying because I have 2 ways to achieve my animation in my mind which are completely different. Here is an explanation about what I want to achieve: I have a webpage with, let say, five sections AND a footer. Let say that when I scroll up or down, I'm going to the next/previous section. Each section is a supposed to be fullscreen, actually, only an image and a text are changing I have to scenario in mind, the smoothest is to go with Observer plugin like : https://codepen.io/GreenSock/pen/XWzRraJ or https://codepen.io/ghislefou/pen/mdQGPMx?editors=1010 I like this scenario, but, what happens to my footer ? This one is not fullscreen and what I want to achieve is when I reach the last section, should I detect that the footer is the next one and free the scrollbar ? What will happen when I enter back to the animation ? Another option is to go this way: https://codepen.io/snorkltv/pen/NWNrbay I started to do it like that but it's not so funky. I would like to have you opinion about the 2 options. I definitely prefer the first one but I m worried not to find something smooth with my footer use case. Thanks a lot for your advices. Best, Ghislain

Hi Rodrigo, Thanks for your answer but no ... I have updated my pen. When pinSpacing property is set to true, I have to much space between by Accordion section and the next one (the full image section) When pinSpacing set to false, I don't have enough space between my last accordion section and the fullimage section. As a result, I cannot read the last text of my accordion: Is there a way to adjust the "pinSpacing" ? Thanks a lot for your help. Best ! Ghislain

Hi here ! Another day, another question. I'm trying to achieve an "on-scroll" content animation that you can see in my pen. It basically works but ... what I had in mind was to remove the added spacing at the bottom of my animated section: pinSpacing: false Yes ... but ... if I activate it ... I have the next section ( the one with image) "pinned" too ( as if it was sticky too). Can I avoid it ? Another question is about the last `.accordion` div ... is there a way not to animate it and having the following section coming smoothly ? Thanks for your precious help. Best ! PS : It was hard to explain .. tell me if you don't understand Thanks

Hi @Cassie That's what I was doing before... and it was working , I wanted to try with the real zip and see if it was working. Anyway, it is not so important ! Thanks for your help.

Hi Greensock, After registering as shockingly green, I tried to install gsap-bonus.tgz package on my Stackblitz project ... and I'm facing an issue: npm install ./gsap-bonus.tgz npm WARN tar TAR_BAD_ARCHIVE: Unrecognized archive format npm ERR! code TAR_BAD_ARCHIVE npm ERR! TAR_BAD_ARCHIVE: Unrecognized archive format npm ERR! A complete log of this run can be found in: npm ERR! /home/.npm/_logs/2023-07-06T08_07_35_283Z-debug-0.log Do you have any idea about the reason why I'm facing this error ? Thanks a lot for your help. Best regards.

Hi Jack, You rock ! Thank you for your help. It works fine now ! Best,

That's strange ... I'm thinking it's related to the css classes applied on the smoother and content div, that are not overriden by ScrollSmoother. As a result, CSS snap is not working ... I can confirm that I have the same result on both (yours and mine) StackBllitz links. I cannot apply a CSS media query because of iPad screen for example. If you have any idea, that would be awesome. Thanks a lot.

Hi Jack, That’s correct, it should not appear with visibility hidden … you can have a look on the link you shared : https://stackblitz.com/edit/js-pucgaz?file=src/page.js,index.html It is the same behavior on my iphone. thanks a again !

Hi, it's me again. I've just realized that, on my iphone, the added divs are visible, meaning they have an height of 100vh. Is it related to any deactivation of he ScrollSmoother on mobile devices ? Thanks a lot for your help.