You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
From my experience, GSS listens for DOM changes and recalculates the layout when elements are added or removed. So when a React changes the DOM after an update, GSS would notice the change and recalculate the layout.
GSS does apply inline styles to each element in the layout. It uses absolute positioning. Specifically, it sets the top, left, width and height properties.
And yes, it does rerun whenever the window is resized.
It should be pretty easy to throw together a little demo on Codepen to see how they work together - and you can use Dev Tools to see what's going on in the DOM.
By the way, I'm not a contributor to this project, so if anyone who knows better wants to chime in, be my guest.
My goal is more along the lines of compiling the GSS styles in the react render function so I can perform animations by adjusting the constraints and applying the inline styles myself...
From my experience, GSS listens for DOM changes and recalculates the layout when elements are added or removed. So when a React changes the DOM after an update, GSS would notice the change and recalculate the layout.
GSS does apply inline styles to each element in the layout. It uses absolute positioning. Specifically, it sets the top, left, width and height properties.
And yes, it does rerun whenever the window is resized.
It should be pretty easy to throw together a little demo on Codepen to see how they work together - and you can use Dev Tools to see what's going on in the DOM.
By the way, I'm not a contributor to this project, so if anyone who knows better wants to chime in, be my guest.
—
Reply to this email directly or view it on GitHub.
"Suggested variables" are the best solution if you want to change a number within a constraint. So, if you wanted to change div[width] == 20 to div[width] == 40, you could use a suggested variable for the width like this:
div[width] == $w
You can pass GSS the value for w in your code through 2 functions. The first is the constructor (var engine = new GSS(document, {w:20});). The suggested variable is passed in as a key-value pair on a plain Javascript object.
You can change the variable value later by calling engine.solve({w: 40}). You could insert this code into one of the lifecycle methods of your react component. So the code could look like this:
Not quite, I was hoping to get a JSON object back describing the inline styles for that element. That way, I could use something like react-tween-state to animate to that value.
Activity
jamesdarvell commentedon Dec 29, 2015
From my experience, GSS listens for DOM changes and recalculates the layout when elements are added or removed. So when a React changes the DOM after an update, GSS would notice the change and recalculate the layout.
GSS does apply inline styles to each element in the layout. It uses absolute positioning. Specifically, it sets the top, left, width and height properties.
And yes, it does rerun whenever the window is resized.
It should be pretty easy to throw together a little demo on Codepen to see how they work together - and you can use Dev Tools to see what's going on in the DOM.
By the way, I'm not a contributor to this project, so if anyone who knows better wants to chime in, be my guest.
ccorcos commentedon Dec 29, 2015
I see. Thanks for the reply.
My goal is more along the lines of compiling the GSS styles in the react render function so I can perform animations by adjusting the constraints and applying the inline styles myself...
jamesdarvell commentedon Dec 30, 2015
"Suggested variables" are the best solution if you want to change a number within a constraint. So, if you wanted to change
div[width] == 20todiv[width] == 40, you could use a suggested variable for the width like this:div[width] == $wYou can pass GSS the value for
win your code through 2 functions. The first is the constructor (var engine = new GSS(document, {w:20});). The suggested variable is passed in as a key-value pair on a plain Javascript object.You can change the variable value later by calling
engine.solve({w: 40}). You could insert this code into one of the lifecycle methods of your react component. So the code could look like this:Would that be appropriate for what you're trying to achieve?
ccorcos commentedon Dec 30, 2015
Not quite, I was hoping to get a JSON object back describing the inline styles for that element. That way, I could use something like react-tween-state to animate to that value.