Interactions / Animations not working in exported code

Design help Animations & Interactions
1

So I’ve run into an issue where my interaction animations (Page Load, Scroll, Hover, etc) aren’t working as designed in the code that I’ve exported and hosted elsewhere (Bluehost, for transparency). I’ve attempted to open the site using several different browsers (Chrome, Firefox, Safari), and have been running into similar issues every time. I’ve also opened the files directly in browser, so the issue seems to be with the code itself.

I’ve read through the code and it seems like the js file is linked properly in both the html and css, and otherwise I have no idea why these would be an issue.

Has anyone run into similar issues? Or have ideas as to how I might resolve this?

Live Site: https://www.stumcgibbon.com/
Here is my public share link: Webflow - Stu Portfolio (9/1) (DEPRECATED)

2

I have run into this issue and I believe it’s caused by certain ID numbers relating to the interactions being different from those in the site’s .CSS file.
I found I needed to flush the cache of my CDN (CloudFlare) in order for the browser to re-download the correct .CSS file.
(Obviously make sure you’re uploading the site’s .CSS file even if you’re only making ‘page level’ changes.)

Good luck!

3

Stu were you able to figure out how to fix this issue? I’m going through the same bug on my exports. Looking for the fix.

Thanks!

4

I am also in need of a solution to this problem. Ive been searching for a solution for quite a while

5

I’m running into a similar problem. I have a scroll into view interaction that isn’t working.

Thanks!

6

I’ve found that if you add
Webflow.require(‘ix2’).init();
in a script tag to the end of your body section the animations start working

1 Like
7

does adding this^ into tag work?? has anyone else solved this problem using a different solution?

1 Like
8

Hello @smcgibbon ,

I have the same issue now, Can you share the best solution you got?

Thanks!

9

I run into the same issue and find a lilttle Hack.

On some pages no animation. So what I have done

  1. open the page on the webflow dev site : the published site
  2. Go and load the source code. (alt+cmd+u)
  3. copy the script at the end of the body

for me it was this

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61718df6321c9938b9e03f5c" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://uploads-ssl.webflow.com/61718df6321c9938b9e03f5c/js/webflow.4d36d4866.js" type="text/javascript"></script>
  1. go on your exported site and replace the scripts at the end of the page ( that look like the one you copy and replace.
    Works for me.

It’s a real bug :grimacing: :grimacing: :grimacing: cause some page work and some don’t.

EDIT : In the exported version after more investigation, on script was missing

This one :

  <script src="https://uploads-ssl.webflow.com/61718df6321c9938b9e03f5c/js/webflow.4d36d4866.js" type="text/javascript">
	  
  </script>
2 Likes
10

Same issue here did anyone found the fix

11

Hi, Did you find any solution to make .lottie animations work in exported code?

12

Hi, I have noticed that .lottie animations do not work in exported code.

13

This worked perfectly! Thank you so much, I was driving crazy with this issue 'til follow these steps.

Anyone with this problem can do it and should work fine. Hope Webflow do something about that one day.

14

Hey guys, I was also struggling to get my Webflow interactions working on a Shopify site. The main thing that solved my issue was including Webflow’s data attributes on the <html> element!

My exported Webflow code’s <html> element looked like this: <html data-wf-page="64769715d408147e1301ade2" data-wf-site="64769715d408147e1301addc">

I had included all of the Webflow CSS and JS already but nothing seemed to work until I added those data attributes to my <html> element in Shopify. Hope that helps!

2 Likes
15

If you guys are using Cloudflare pages to host your project, I recommend disabling Auto Minify JavaScript in Speed > Optimization. This was causing this problem for me.

16

I have the same problem. i feel that Webflow don’t want exported code animation to work, instead, they want you to pay extra to host your website using a custom domain. another way u can still use the exported code is without using interaction, u can still use hover in style. but not interaction. and add the animation using code using chatgpt if u know little bit of code. that will work well. so remember to remove all the interactions before exporting the code

17

Thank you so much, this solved the problem :)

18

Hi Himanshu, did you ever solve this? Having similar issue with .json not loading on code export. Thanks!