Comments (9)
How did this turn out?
from appfairy.
I've added native support for that in version 0.8.0. It will work out of the box now
from appfairy.
Thanks for your tips @jayb967
I've created the following script to convert the json events inside Webflow.require('ix2').init(...):
const fs = require('fs');
let rawdata = fs.readFileSync('events.json');
let events = JSON.parse(rawdata);
function traverse(object, convertFunction) {
if (typeof convertFunction != "function")
throw "convertFunction must be a function(key,valye) that returns a value for all keys"
if (object !== null && typeof object == "object") {
Object.entries(object).forEach(([key, value]) => {
object[key] = convertFunction(key, value)
traverse(value, convertFunction);
});
}
}
traverse(events, (key, value) => (key == "selector") ? value.split('.').join('.af-class-') : value)
fs.writeFileSync('appfairy-events.json', JSON.stringify(events))
I had also to modify my index.js file to look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import './scripts'
import './styles'
import IndexView from './views/IndexView'
// Run the following commands on the console from a deployed webflow site:
// document.getElementsByTagName("html")[0].getAttribute('data-wf-page')
// document.getElementsByTagName("html")[0].getAttribute('data-wf-site')
const WEBFLOW_PAGE_ID = 'your page id'
const WEBFLOW_SITE_ID = 'your site id'
class App extends React.Component {
componentDidMount() {
var doc = document.getElementsByTagName("html")[0]
doc.setAttribute('data-wf-page', WEBFLOW_PAGE_ID)
doc.setAttribute('data-wf-site', WEBFLOW_SITE_ID)
};
render() {
return (
<React.StrictMode>
<IndexView />
</React.StrictMode>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root'),
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
@DAB0mB Any chances of incorporating the above in Appfairy?
from appfairy.
Wow thanks for writing Appfairy @DAB0mB and thanks for the tips @ronaldocpontes @jayb967!
I wrote up a summary of what I learned while facing these issues here.
Here is a little bash script that automates the application of the node script ronaldocpontes wrote:
#!/usr/bin/env bash
# Save json from webflow.js to events.json
tail -n2 webflow.js | head -n1 > events.json
# Delete last two lines of webflow.js
sed -i '$ d' webflow.js
sed -i '$ d' webflow.js
# Generate appfairy-events.json
node converter.js
# Write appfairy-events.json to webflow.js
cat appfairy-events.json >> webflow.js
# Add closing parenthesis
echo >> webflow.js
echo ");" >> webflow.js
Also if someone is facing issues with on page load interactions, I think it's a problem with Webflow -> React, not Appfairy. My work around was to make it an onclick
animation, assign the click to a button with display: none
, and then trigger the click of that button from useEffect/componentDidMount.
document.getElementById("animation-button").click();
from appfairy.
@jayb967 Appfairy renames the classes and for a good reason - it saves potential conflicts when attaching additional stylesheets, because Webflow uses extremely generic rules. Appfairy shouldn't rename elements which start with a w-
prefix though, for that very reason. What classes do you have troubles with? Can you provide specific names?
from appfairy.
Yes I understand the webflow class name change which is ok, but a lot of interactions made on webflow are not called on the html new class name "af-class-.." from the generated js file. For instance here is a small snippet of my webflow generated interaction inside my js folder, after using the appfairy command:
{ "slug": "reveal-navigation", "name": "Reveal Navigation", "value": { "style": {}, "triggers": [{ "type": "click", "selector": "<mark>.menu-content</mark>", "preserve3d": true, "stepsA": [{ "transition": "transform 500ms ease 0ms", "x": "25%", "y": "0px", "z": "0px" }], "stepsB": [] }, { "type": "click", "selector": ".reset-menu", "stepsA": [{ "display": "block" }], "stepsB": [] }] } }, { "slug": "close-navigation", "name": "Close Navigation", "value": { "style": {}, "triggers": [{ "type": "click", "selector": ".**menu-content**", "preserve3d": true, "stepsA": [{ "transition": "transform 500ms ease 0ms", "x": "0px", "y": "0px", "z": "0px" }], "stepsB": [] }, { "type": "click", "stepsA": [{ "display": "none" }], "stepsB": [] }] } }, { "slug": "move-right", "name": "Move right", "value": { "style": { "opacity": 0, "x": "0px", "y": "0px", "z": "0px" }, "triggers": [{ "type": "load", "preload": true, "stepsA": [{ "wait": 700, "opacity": 1, "transition": "opacity 500ms ease 0ms" }], "stepsB": [] }] } }, { "slug": "zoom-in", "name": "Zoom in", "value": { "style": {}, "triggers": [{ "type": "hover", "selector": ".**project-image**", "preserve3d": true, "stepsA": [{ "transition": "transform 1000ms ease-in-out 0ms", "scaleX": 1.08, "scaleY": 1.08, "scaleZ": 1 }], "stepsB": [{ "transition": "transform 600ms ease-out 0ms", "scaleX": 1, "scaleY": 1, "scaleZ": 1 }] }] } }, { "slug": "rollover", "name": "rollover", "value": { "style": { "opacity": 0, "x": "0px", "y": "0px", "z": "0px" }, "triggers": [{ "type": "hover", "selector": ".**project-rollover**", "preserve3d": true, "stepsA": [{ "opacity": 1, "transition": "transform 600ms ease-out 0ms, opacity 600ms ease-out 0ms", "x": "0px", "y": "0px", "z": "0px" }], "stepsB": [{ "opacity": 0, "transition": "opacity 600ms ease-out 0ms" }] }] } }, { "slug": "open-menu", "name": "Open Menu", "value": { "style": {}, "triggers": [{ "type": "click", "selector": ".**main-menu**", "preserve3d": true, "stepsA": [{ "display": "block", "opacity": 1, "transition": "transform 200 ease 0, opacity 200 ease 0", "x": "0px", "y": "0px", "z": "0px" }], "stepsB": [] }, { "type": "click", "selector": ".**hamburger**", "stepsA": [{ "display": "none", "opacity": 0, "transition": "opacity 200 ease 0" }], "stepsB": [] }, { "type": "click", "selector": ".**close**", "stepsA": [{ "wait": "250ms" }, { "display": "block", "opacity": 1, "transition": "opacity 200 ease 0" }], "stepsB": [] }] } },,
All of my selectors are still the same name and not also changed to "af-class-classname"which then doesn't call functions (i.e. where my mouse hover displays an underline)
from appfairy.
I guess I'll add an option to disable encapsulation but I truly don't like how webflow assumes it's the only thing that matters...
from appfairy.
Hi, i also have this issue. Renamed classes according to your answers, yet still not working.
I think this tool can be really amazing if these issues are resolved.
from appfairy.
Hi I am having the same issue. @DAB0mB Do we have an option to disable encapsulation / renaming of the classes?
This is an example of a webflow site with animations that won't work on Appfairy:
https://webflow.com/website/Scholr-Education-One-Page
from appfairy.
Related Issues (18)
- unable to inject af-el components HOT 8
- React-router warnings HOT 7
- Webflow to Gatsby - what do I do with webflow.js and jQuery? HOT 2
- Reusable components & content mapping
- appfairy_config.js not working HOT 3
- Interactions don't seem to work after appfairy migration HOT 2
- When using Appfairy, my whole page gets overwritten with the current date HOT 1
- Does appfairy work on Windows? HOT 3
- Can't resolve '..controllers/IndexController' in 'C:\path\appfairy\src\views'
- Column element from webflow doesn't display well
- TypeError: factory is not a function HOT 2
- Unhandled Rejection (ReferenceError): Stats is not defined HOT 1
- Css not working
- Controllers architecture HOT 2
- Compilation warnings HOT 16
- Files missing/Error when using appfairy command HOT 6
- None of the transform animations are working when using appfairy HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from appfairy.