Webflow Animation

The first timeline animation looks a bit glitchy when clicked, it uses the same animation as others though, only affecting different classes. So I am not sure what went wrong here, any webflow animation expert can help out? Thanks!!!

https://preview.webflow.com/preview/the-man-in-the-hat?utm_medium=preview_link&utm_source=designer&utm_content=the-man-in-the-hat&preview=2c2999410e087a100b8570e21e712a5e&pageId=6075b0cca778d36cf22d799c&workflow=preview

Hello @Daphne_wang !

So you are using an initial state which is good practice in most cases but as the “Timeline” is loading in on your initial screen the initial state from the scroll animation doesn’t get triggered fast enough.

The simplest solution I would use is to change its opacity setting like this.

That will get rid of it loading in too early already in place visible. Hopefully this answered your question but you need more help please let me know.

Always,

Sean

Hi Sean,

Thanks for your reply. I wasn’t being very clear about my question, I actually meant when clicked the 1765 - 1882 thumbnail, it works strangely, definitely some problems with it but not sure what causes the issue. Though thanks for letting me know to set the opacity to 0 on the h1.

Cheers,
Daphne

Hi @Daphne_wang !

I apologize for misunderstanding. The animation is definitely having some issues, what I found is you are using size animations. Since the length of the page increases as you increase the size it makes this animation look odd. What I would suggest is using scale instead as it will already have the page length stay the same but the content will scale to full with the animation.

  • First I copied the animation easing from the size animation and then deleted the size animations.

  • Next I added an initial state for (story_timeline_wrapper)(1765) scale to be 0x and 0y

  • After that I added a scale action where the last size action was setting it to 1x and 1y and added the custom easing you had selected.

  • Last I went to the (story_timeline_wrapper)(1765) settings and set the display to none so it would be hidden on page load. (I didn’t know if that is what you wanted but it looked better to me)

I hope this is helped you achieve what you wanted to. If this is what you wanted I would suggest making similar changes to the other sections for animations using scale instead of size.

Have a great day,

Sean

Thanks a lot Sean! It works!

1 Like