Help Smoothing Out Interactions

Hey all,

I am putting together a page load animation, and it seems to have a hitch in it. I am not sure whether I am overlooking an interaction setup error I’ve made or if the content I am animating is too heavy. If anyone has a suggestion and has time to look, here are my links:

Live Link
Read-Only Link

Tagging @Finsweet since they are animation masters :slight_smile:

Additionally, here is the glitch I am seeing:

https://www.loom.com/share/9d1984c9e0754b74bf53f4f13cc13230

Thanks in advance!

**UPDATE: I have added similar interactions to different pages where my interactions only involve opacity and move on text elements, and I am still seeing choppiness. After reading more in the forums, I can confirm it still happens in Incognito, other browsers, and it shouldn’t be a hardware issue on my end.


Here is my public share link: LINK
(how to access public share link)

Hey,
I would remove all those “Hide/Show”. You don’t really need those for many interactions. And that one actually removes it from the layer stack. It’s a long explanation on my experience but I’ve cease-and-desisted the hide/show - as much as possible. :slight_smile:

I do make the parent block of the interaction Opacity: 0 in CSS panel, so you don’t get that initial blinking from the browser on load.

Also, speed up the time. For this one 1.2 is bit slow. If still want the effect. Use .75 or 1.

But change to Ease-In or Ease-Out, they’re reallllly slow to me

Let me know if that helps.

Hey Gary, thanks for the reply!

For the nav block, I removed the show/hide from the CSS styles panel, and then removed it from the interaction. I also made the parent container 0% opacity, and then changes the interaction accordingly. However, I am still seeing the exact same glitch. It seems to happen with the Hero Image Container starts to fade up…

Haha, I know the animations are slow…I like it! For now anyways haha.