VikAPAD
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by VikAPAD
-
-
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?
See the Pen LYJozNX by OBP-Jared (@OBP-Jared) on CodePen
-
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 theh3
to start to the right. Then once the left edge ofsection-2
hits the left edge of the screen, the background grow to a scale of 1, theh2
would animate in from the left and theh3
would animate in from the right.
Here is my attempt so far: -
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):
-
Never mind, I discovered this in my research which is exactly what I needed!
See the Pen xxEQNBB by GreenSock (@GreenSock) on CodePen
- 1
-
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 rest100vw
. 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 not100vw
and have the navigation and scrolling snap to those panels and their siblings accordingly? -
-
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!
- 1
-
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).
See the Pen abGorMo by VikAPAD (@VikAPAD) on CodePen
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?
GSAP text animation with custom font causes weird pixel artifacts
in GSAP
Posted
Very odd behavior, but your solution worked perfectly! Thank you so much!