Timed animation is not smooth or glitch

Design help Animations & Interactions
1

Hello,

First post here, I usually find an answer to any problem with a search but not this.

On the home page in the About section, the header “Tools” move/opacity animation always starts over about a quarter of the way through on any device. To me, the configuration looks the same as the many parts of the page that run smoothly using the same animation settings.

Tried tinkering with it for a while, what am I missing?

https://kevins-kunnel-04e1e0.webflow.io/#about

https://preview.webflow.com/preview/kevins-kunnel-04e1e0?utm_medium=preview_link&utm_source=dashboard&utm_content=kevins-kunnel-04e1e0&preview=57e2c519170892a221d40ec1b12b157e&mode=preview

Thank you in advance for taking a look!

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

2

Hello Kevink!

It was a bit confusing but I believe I know how to solve your issue!

So basically both headings are the same element because they share a name that being “Heading Serif 38”. When your animation goes through it calls and moves that element twice one for the “About” title and the other on the “Personal” title. When this happens it starts a new animation on both.

The easiest way to fix this issue in my eyes is to duplicate the element “Heading Serif 38” for one of them and rename it. Then proceed to change the corresponding element name to the animation.

If you need more explanation or other help let me know!

Have a great day,

Sean

3

Yes renaming the class or adding a unique combo class to each similar element fixed this!

Ah, yea my brain goes to mush staring at a screen for too long…

Thanks for looking!
Kevin

1 Like
4

So basically both headings are the same element because they share a name that being “Heading Serif 38”. When your animation goes through it calls and moves that element twice one for the “About” title and the other on the “Personal” title. When this happens it starts a new animation on both. MyPrepaidCenter.com

1 Like