Interaction Animations Not Working

[Desiign]

Hi there!
I have been using Webflow for quite a while now, but today I ran into a problem that I couldn’t find a solution around. So I’m developing this sort of animation, in which the logo pops up when the site is loaded for a few milliseconds, and with this I didn’t want any of the website’s content to be visible apart from the Hero Section. After these few milliseconds pass by, the Hero Section resizes and becomes smaller, with the content of the website now visible.

So what I did was I added an interaction to the Lower Section of the website, in which the Initial Appearance had it Display to None and the Opacity is at 0%. Then I added a Load trigger, which waits for 2500ms then sets the Display to Block and the Opacity to 100%. Now to begin with, this works perfectly, but the problem I encounter is that when I add animations through interactions to some of the elements at the lower part of the site, they simply won’t work. They don’t animate in like I want them to.

I would really like to know what the problem is and how I may go about fixing it, or perhaps some of you could suggest a more efficient way of doing what I desire.

Thanks in advance and I greatly apologise if I was unclear,
Please do check the preview link below to get a clearer picture,
Aayham.

---

Here is my public share link:
https://preview.webflow.com/preview/izral-partnership?preview=33d2ceeaa34d4dcffeb73646f3fbcd4a

[Brando (Brandon Roche)]

The issue could be arising because you have a timer of 2500ms set on the lower half, but you also have a wait timers less than that on some of the interactions. I think this may be making them trigger before the lower section even appears.

Try animating the top section instead. You can have the top section height start at 100vh, and transform to 50vh after the desired wait time. I used 2000ms for the wait time, 500ms for the transition time and the other interactions triggered perfectly!

I hope that makes sense!
Cheers!

[Desiign]

Thank you for your reply!
I have indeed also added an animation to the top half, as seen in the preview. It starts out at about 1000px and then shortens to 400px after 2700ms. This works great, but the problem still lies that the lower section is still visible when the top section is still at 1000px. If you preview the site you’ll see that the top section starts out at 1000px, but if you scroll down while it is 1000px the bottom section is visible. What I want is for the entire lower section to be unseen while the top is 1000px, and when it shortens to 400px I want the lower section to appear.

Hope that’s clear and understandable.
Thanks again!

[Brando (Brandon Roche)]

Try using 100vh (view height) instead of px for the height. 1vh=1% of the height likewise with vw(view width) being 1% of the width. These units are good to use because they account for varying screen sizes and resolutions.

If you use 100vh animate the height to 50vh, it will create the animation you are looking for

Hope that clarifies things!

[Desiign]

Yep, that does help me get the top animation.

My problem now is, if you click on the elements in the lower section (such as the “What We Do” text) you will see that I have added some interaction animations to them, but they’re not working. Why?

[Brando (Brandon Roche)]

After playing with the interactions for a bit I think I figured it out. You still need to remove the interaction from the lower section. Once I did this, the other animations triggered!

[Desiign]

I have realised that as well now. But that’s kind of a bummer because I don’t want the Lower Section to show for the first 2700ms. Any ideas?

[Brando (Brandon Roche)]

Right now you have the top section set to 150 vh so the lower section will not show until the top section animates.

[Desiign]

Well I’m just going to leave it be for the time being…
Will post back if I need further help.
Thank you a whole lot Hamilton!