Jump to content
Search Community

sbme123

Members
  • Posts

    3
  • Joined

  • Last visited

sbme123's Achievements

  1. Hey @akapowl this info is great. Thank you! I was struggling to find any previous topics around this. Yes apologies! I should have included that Barba was part of the build. I very much appreaciate you delving a little deeper. I've not really worked with Barba but i'll review the lifecycles again and see what I can do. I'll let you know how I get on with it all.
  2. Thanks @mvaneijgen I'll give this a look shortly.
  3. Hey Guys I'm having an issue with the horizontal scroll automatically playing through on page load. I need the horizontal scroll to start when the user starts the scroll. Here is a live version of the build: https://syardv1.netlify.app/ Codepen: https://codepen.io/siplaster/pen/QWxgMMy When you navigate to the hire page. It auto scrolls. Best to look on desktop atm. No mobile styling. Here is my gsap animation: let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: ".horizontal-scroll-container", pin: true, scrub: 1, end: "+=3000", }, }); Here's a basic version of my html. <div class="horizontal-scroll-container"> <section class="panel "> </section> <section class="panel "> </section> <section class="panel "> </section> <section class="panel"> </section> </div> & my css .horizontal-scroll-container { /* This is the whole horizontal scroll container */ width: 400%; height: 100vh; display: flex; flex-wrap: nowrap; color: #fff; } .panel { /* This is the indivisual pages to scroll through */ font-weight: 300; width: 100vw; height: 100vh; display: flex; flex: 0 0 100vw; } Help would be greatly appreciated. Thanks Simon
×
×
  • Create New...