VikAPAD

Very odd behavior, but your solution worked perfectly! Thank you so much!

I have a pretty simple text animation where I have the left part of a word animating in from the left and the right part of the word animating in from the right. The animation works perfectly on desktop, but on mobile(iOS is what I'm testing on) I am getting some weird artifcating on the top right corner of the "Y"s. This seems to be an issue with the custom font I am using, because if I change to Arial or Verdana the issue is not present. I found a few different possible solutions on this SO question, but no suitable solution yet. One thing that does seem to work is adding will-change:transform; to the text container. Though this is not a perfect solution as it ends up cutting off the top right corner of the "Y" where the artifacting is happening. Any ideas?

I have my overall horizontal scrolling timeline working the way I want it but now I am moving on to animating some of the elements inside of the panels and I'm having a tough time trying to figure out how to make that work. For example, my second panel has an ID of section-2 I would like for the background(which is an image inside an absolute positioned container) to start with a scale of 0, the h2 to start to the left of it's final position and the h3 to start to the right. Then once the left edge of section-2 hits the left edge of the screen, the background grow to a scale of 1, the h2 would animate in from the left and the h3 would animate in from the right. Here is my attempt so far: https://codepen.io/VikAPAD/pen/poKKGVO

Perfection. Thank you!

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

Never mind, I discovered this in my research which is exactly what I needed! https://codepen.io/GreenSock/pen/xxEQNBB

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

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

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.

This is great, thank you so much @akapowl!

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?