Possible Webflow Javascript Animations issue? (Interactions 2.0)

Anyone else have this issue?

The onscroll animations set via Webflow in webflow.ls works on the HTML files but upon exporting to php via the PG theme convertor it doesn’t work.

This is a copy of our answer from the support:

​After examining your project, there are no issues with the Webflow animation script (as such, the console remains free of any error messages).

From what I see your template includes a slider in which you want to integrate content from a custom post type, but it appears that your conversion still lacks a little expertise in its construction. Also, I reassure you on the main point of your question (the proper functioning of webflow animations) and I invite you to persist in your attempts. Each issue is a further step towards quality expertise in the field of WordPress theme creation.

1 Like

You are correct. So the issue here is that the javascript is working on the index page but not the new template pages that I am creating.

I have solved the issue after many hours of racking my head. The solution came with help from a post someone else had made on a webflow forum. and I hope @Emmanuel that you can understand that anyone can run into this issue in converting from Webflow to Wordpress using Pinegrow and it would help all new users(via tutorial video explanation) to the PG theme convertor because there needs to be either customization of the header or separate headers for each new page template.

The issue is in the header where each Webflow page is given a unique id number in the html tag(data-wf-page) and when setting up the header as a reusable template as suggested in the PG tutorials this would not work. The wordpress header needs to pull in this unique page id from the HTML exported code instead of using the one assigned for the index page which is why my javascript was only working on the index page and not the other template pages.

Thanks for the feedback.
Would you be kind enough to share the source for this tip? (link to the wf forum post)

Here is the post: https://forum.webflow.com/t/adding-webflow-js-to-wordpress/64137/3

Is there something in the PG theme editor which can insert the unique html tag for each page in the header otherwise I will have to either look for a solution that already exists or code it up myself in wordpress.

In case anyone is interested I have created the following code for the header file where one can dynamically inject the unique webflow page id number into the opening HTML tag based on the current page template.You just add a list of all your data-wf-page(unique webflow page id) and assign them to their corresponding page template that you have created in your wordpress theme. It will pull the page slug of the current template, check for its webflow page id and output it into the HTML opening tag attribute. This means I can use the header as a reusable template and have my javascript work for all the pages as the HTML tag is updating according to the current page template in use.

Keep in mind that a better solution may exist but since I am just learning how to program this is the first ever piece of PHP code I have ever created after watching some great courses on Udemy :slight_smile:

  1. replace the 111111111111 with your own unique data-wf-page id and add the template slug for it
  2. replace the data-wf-site with your own unique data-wf-site number as I have changed it here to 333333333.

Also the first key in the array is for index.php but because the get_page_template_slug() function returns nothing for the index.php/home page it is blank.

I couldn’t find a solution online so thought others in my position could benefit and I had fun doing it . Cheers!