Jump to content


  • Posts

  • Joined

  • Last visited

VikAPAD's Achievements

  1. I am using the "ScrollTrigger - horizontal scroll with variable width sections and anchor links" Pen and I am trying to modify it in order to style the links based on which panel is currently in view. I've found a couple different solutions for styling the nav, but I can't seem to get it working with this variable width solution. I believe the problem lies somewhere within the start/end position for the sections loop. Here's where I'm stuck currently (I added 2 comments in the area I've been working in): https://codepen.io/VikAPAD/pen/poKKGVO
  2. Never mind, I discovered this in my research which is exactly what I needed! https://codepen.io/GreenSock/pen/xxEQNBB
  3. I am using the "Anchor navigation to ScrollTriggered section" as a starting point and I am wondering how I would go about modifying it so that the panels can be variable widths. For example, I would like the first panel to be only 50vw and the rest 100vw. I tried changing this in the CSS, but it throws off the scrolling and the snapping. How could I go about altering this to automatically detect panels which are not 100vw and have the navigation and scrolling snap to those panels and their siblings accordingly? https://codepen.io/VikAPAD/pen/vYrrZpj
  4. Great, thank you @SteveS that was what I needed. I now have it animating in correctly, any idea how I would go about having the text animate off the right side of the panel as you scroll to the next panel? https://codepen.io/VikAPAD/pen/VwxewmO
  5. Based on the Horizontal scrollTrigger demo, I have 5 panels that are 100% height and width. Within the panels I have additional content. I want the content to start off the left side of the screen and as you scroll to the next panel it animates into the center. I have it somewhat working for the transition from the first slide to the second slide, but as the second slide comes in, it triggers the content for each frame to animate in so once you get to the 3rd/4th/5th frames, the content is already in the center. I would also preferably like the content to animate off the right side of the panel as the new one is being scrolled in, rather than just staying in the center.
  6. I am using Horizontal snapping sections as a starting point. What I would like is for the sections to scroll in from the right and the content within the sections to scroll in from the left. My initial thought was just to create a separate container for the content with fixed positioning and reverse the order. This actually almost worked, but due to the fact that there are 10 total sections, the scroll height that's being calculated is too tall which allows you to continue scrolling down the page once you reach the end (as seen in the CodePen below). https://codepen.io/VikAPAD/pen/abGorMo My other thought was to have the content within each of the panels and just start with the content off the left side of the screen and have it scroll into the middle as each panel is scrolled into view, but I haven't had much luck with that. Any ideas?