babis

Hi guys, how can i make the left side(the scrollable), more controllable and slow. At this time as soon as the section is pinned, i lose control of the scrolling, so i find it difficult for example to go to the first itinerary or the very top of content in general

Anyone wanna help guys?

Hi agains folks, sorry for pestering you with this one, but i need to solve this. I managed to make the correct path. So, the issue that arises now ,is that the svg path is always in the top left corner. 1) i want to put it in the middle of the container div. 2) How to use round cap in path, only at the side of the arrow and not in the beginning of the path . I m trying to move the svg elsewhere inside the container div, but it takes the whole image background with it. I want to put it anywhere i want but the bg image to remain full stretched to the container. Sorry and thank you again!! https://codepen.io/babistsour/pen/gOKaJGr

Hi guys i reopen the topic because i cant change the path to the correct one, i want the exact same path as my example , because its the clients logo. But when i change the path, everything is acting weirdly.

Hi guys, i m trying to animate this masked arrow svg from 0% to 100% but it doesnt work. What i m doing wrong?

Hi Rodrigo, thank you for your answers. I put in the navbar a "will-change: transform" and the problem has gone. As for the green section, i didnt understand the solution. Do you suggest not to animate the width, but something else. Sorry, noob here..

i Cant reproduce the code right now because of the complexity of the structure and dependecies but its similar to this codepen https://codepen.io/babistsour/pen/vYjxVQY . here the image on the left in green section is also flickering and shaking when the animation is in progress. But it only happens in chrome. IN firefox its ok.

Hi guys, i have made a sticky bar( the white one ) in this page http://btr.radial.website/en/roadtrips/tour1/ , but only in chrome the links and the button are shaking as i scroll the page. What might be the problem. The code is this simple one const innerNavigation = document.querySelector( '.inner-navigation__container' ) if (innerNavigation) { ScrollTrigger.create({ trigger: innerNavigation, start: 'top 54px', endTrigger: '#accomodation', toggleClass: 'active', pin: true, scrub: true, pinSpacing: false, }) }

Thank you very much guys. I did it. I put the width to go from 70% to to calc(100% - 64px), so i managed the desired margin for both sides to be 32px. THanks a lot

Yes Cassie. Exaclty that. But with the ability for the green section to grow as i scroll. Like my example. I put the code for that, but something goes wrong. Something like this.(Look at the video section) https://goclass.webflow.io/

Hi guys, i want in this code, when i scroll to green section to be sticky and as this is sticky, the right content to be scrolled .And when it finishes, to continue scrolling to section 3. I managed to make it sticky but as soon as the green section become sticky, then the content behind was scrolling and not the inside content. I hope you understand...