Webflow interactions + finsweet TOC makes some elements invisible on mobile

Design help Custom code
1

Hello!

I’m working on a website for client that wants to add auto-generated ToC to his article pages.

For that I used Finsweet’s attributes solution: Table of Contents for Webflow

Here’s a live website: Seven Secrets About Beauty That Has Never Been Revealed For The Past 50 Years.

Here is my site Read-Only: Webflow - Maxence's stellar Site

Now the website has some animation that plays on load, to reveal some elements in the hero like the article image and title etc. When the custom code for ToC was added, the elements just stop being visible on mobile. By mobile I mean any touch device, it’s not enough to just resize the browser window on your computer.

I even tried adding the script after the page is fully loaded, or manually using the console - same thing. When the animation and the script are present at the same time, these elements are not visible.

Removing the animation also helped which clearly shows that the combination is the animation + ToC script is causing the issue, but I have no idea why. Any ideas on how to resolve this? Thanks!

2

Hi, since this project had a tight deadline I had to come up with some solution, so I deleted all the Webflow native animations and recreated them all using the GSAP library.

The problem was originally with the combination of finsweet’s attributes and the transform style attributes set to an element by Webflow’s interaction panel. Even tho the animated elements were NOT the elements targeted by attributes.

In case someone figures out how exactly the 2 collide I’d be very interested to hear about it!