Animation not properly playing

Hey Guys,

Inside my introWrapper div, I have set a timed animation called ‘Coffee Fade in on Page Load’ that looks like this.

but for some reason whenever I publish the site, or do a live preview, the page loads and the animation looks like this.

As you can see the animation in the designer mode shows both movement and opacity change as the site loads. But in live preview only the opacity is happening.
Any ideas on how to fix this?

Thank you for any help.


published site : https://alexanders-sublime-project-8b35bf.webflow.io

read only link : https://preview.webflow.com/preview/alexanders-sublime-project-8b35bf?utm_medium=preview_link&utm_source=dashboard&utm_content=alexanders-sublime-project-8b35bf&preview=6d3e4edcdad2be691c34e82615992d75&mode=preview

Hi, @AlexanderBiglane!

As I can see you have 2 Interactions set on Page Load (when page starts loading):

CloudApp

“Hero Banner” Interaction has 4 seconds duration and “Coffee Fade” has only 0.4 seconds delay with 2.4 seconds overall duration.
This way, your Coffee Fade interaction plays while whole hero section is still in the process of fading in and you can’t see it.

I would suggest either adjusting delay on the “Coffee…” or duration of the “Hero…”

P.S. Preview button always plays the Interaction you are currently editing/selecting

Cheers,
Anna

ahhhh everything seems so simple after someone explains it. Thanks so much @sabanna that was it.

edit: that wasn’t actually it apparently.

1 Like

@sabanna, hey quick question. So if the website won’t play both page load animations simultaneously, would a fix to this issue be adding the interaction components of the ‘Hero Banner Fade in on Site Load’ to the ‘Coffee Fade in on Page Load’ animation? basically merging them into one?

Yeppp :slightly_smiling_face: That would be a wise decision. And you will have more control over all elements at once

@sabanna Okay so I’m sorry to keep bothering you with this… But that wasn’t actually the problem it seems. Looks like there’s an issue altogether with the ‘Coffee Fade’ Interaction.

I tested this by deleting the ‘Hero Banner’ Animation entirely, so that the only animation that’s even running is the coffee move and fade in. but just like before, only the opacity change is showing, no movement is occurring in live preview, but it’s fine in designer preview.

Hi again, @AlexanderBiglane!

I am not entirely sure if that you added more animations since our last conversation or it was from the beginning.

Currently, I noticed you have “While scrolling in view” interaction set on “Info Wrapper” which sets all coffee mug parts in certain positions AND Page Loading interaction that have all those elements positions as well ( since it supposes to move those Coffee mug parts from one position to the other). Both Interactions get activated when page loads and a “conflict” happens.

1 Like

@sabanna, you’re a rockstar! Thank you, that was the conflict right there. I solved it by duplicating the ‘CoffeeContainer’ class and having the ‘PageLoad’ animation apply to the first copy and the ‘Scrolling in view’ animation apply to the second copy, and a simple hide/show trigger to swap between the two. :slight_smile:

1 Like

Glad I could help :slightly_smiling_face: :+1: