Slide-In Interaction (on page load) Issue

Design help Animations & Interactions
1

Hi,

I am new to trying out interactions and I am having trouble trying to create a slide-in effect on my Header text (Heading 01) element when the page loads.

Basically what I want is the Heading to slide in from the left (from an opacity of Zero) to its original position (Full opacity) once the page loads. However when I created the interaction for this, the page loads with the text sliding from the original position to the left and then from the left to its original position which looks weird.

I noticed that the Quick effects (that has the slide in option) isn’t available for interactions on page load.

I’d appreciate any help on this. Thanks.

Here is my site Read-Only: https://preview.webflow.com/preview/traveleaf?utm_source=traveleaf&preview=c7386e1fe41326241cd2a7fb8d0eafc4
(how to share your site Read-Only link)

2

Hi,

I managed to figure the issue out. But now I find that the slide in animation is rather choppy even with the easing added in. Is there a way to smoothen this slide in effect? Thanks.

3

@jakerawlins,

I was looking forward to help you with the performance issue, but the public link you shared is broken and I’m getting a 404. Feel free to share it again and tag me in so I can try to help you.

4

How did you figure this issue out? I’m having the exact same problem as you.