by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Oct 26 2017 18:46
    @mathisonian banned @krpx_division_twitter
  • Sep 22 2017 18:27
    @rreusser banned @krpx_group_twitter
Ricky Reusser
@rreusser
when you open it up, it checks how big all the divs are and then draws a timeline
you get a spline editor and can just sequence your variables however you'd like
and when you're happy, just save it as json and copy it into your code
:rocket:
🌛
Matthew Conlen
@mathisonian
that would be so good
Ricky Reusser
@rreusser
and as long as the format is reasonable, you could always define that in js and use js-computed values or whatever
Matthew Conlen
@mathisonian
oh yeah definitely
Ricky Reusser
@rreusser
just curious: does idyll set an environment or something so that you can compile away stuff for production?
Matthew Conlen
@mathisonian
yeah it does
Ricky Reusser
@rreusser
cool, so it's not… impossible…
Matthew Conlen
@mathisonian
it seems... possible...
lol
i'd have to think more about how the json format works and how idyll reads from that to make the scroller work
Ricky Reusser
@rreusser
let's see… [Keyframes/] could be its own component and get a list of step ids or something… so it's easy enough to get information into keyframes in order to keep things loosely coupled
the question, I guess, is how to get information out of it and to the component which needs it
if that interface is clear, well-defined, and minimal, then I'm pretty comfortable throwing together whatever wild js it takes to modify the keyframes…
  1. render scrollyteller:
    [Scrollyteller]
     [FixedContent/]
     [KeyframeEditor/]
     [Step label:"foo"/]
     [Step label:"bar"/]
     [Step label:"baz"/]
    [/Scrollyteller]
  2. the scrollyteller extracts labels from Step children (pun?), sets ids, and passes that information to KeyframeEditor
  3. the keyframe editor computes positions of steps and presents them on a timeline
  4. the keyframe editor calls an onChange function it receives from the scrollyteller and passes its computed state back to the scrollyteller?
Ricky Reusser
@rreusser
not hard to hook up, but kinda sucks if it's tightly coupled all the way through
Matthew Conlen
@mathisonian
is there a 1-1 mapping between scrollyteller and the keyframe editor? the extracting labels and setting ids could be done easily on the idyll AST, it could be implemented as a plugin
Ricky Reusser
@rreusser
keyframes.png
Matthew Conlen
@mathisonian
actually maybe you don't have to do it at compile time and doing all that at runtime is easer
Ricky Reusser
@rreusser
whether fancy or just programatically, I'm thinking of the concept like that
where step id is some identifier for steps
the horizontal dimension is scroll position
Matthew Conlen
@mathisonian
yeah that makes sense to me
Ricky Reusser
@rreusser
one of the most difficult parts IMO is how to parameterize it
I think maybe:
Matthew Conlen
@mathisonian
is the step identifier positioned at the middle of the step?
Ricky Reusser
@rreusser
timeValue = {stepId: 'foo', relativePositionWithinStep: 0.5} (but with more concise names)
yes
I kept finding a need to start transitioning halfway through a step or to delay a change a bit in order to get it to sync up with the text
one of the most common things I found was wanting to insert a step and not destroy the whole sequence of events
anyway, this is totally overengineering it… but then it would be pretty fun to use…
Ricky Reusser
@rreusser
this was my other approach which was actually a little better because the time was collocated with and relative to the text, but it was still quite difficult to work with
I think what made it so difficult was still having to guess at the flow and timing of it and getting things just right via code, when all I really wanted was just a spline editor
Ricky Reusser
@rreusser
(and at any rate, this seems best as a third-party component for now, until when/if it produces something reasonable to work with)
thanks for the feedback!! this has been really helpful and I'm inspired to give it a shot…
Matthew Conlen
@mathisonian
that sounds good (keeping as a 3rd party component until we get something more reasonable) - i have to run to dinner but will think more about / how we can make the interface makes sense
lets keep discussing i think we could do something really cool here
Ricky Reusser
@rreusser
other thing: if there were a gui, then in dev mode it should store in localstorage with an option to refresh from code so that you don't loose everything if you accidentally trigger an auto-reload. but i think that's manageable
Yijiao Liu
@yue899889
How to build a multi-page within multi-page? Suppose I have http://username.github.io and http://username.github.io/test, how i can get a http://username.github.io/test/test2?
Matthew Conlen
@mathisonian
hey @yue899889 - you would have to modify the output option
"output": "../../docs/post-1/", will build to httpp://username.github.io/post-1
but you could change that to "output": "../../docs/test/post-1/"
Yijiao Liu
@yue899889
hey @yue899889 - you would have to modify the output option
Thanks @mathisonian
I see! but the blog 'post-1' is not attached to the blog 'test', so as the blog 'test' is not linked to the home page http://username.github.io. Besides manually update http://username.github.io/test/post-1 as a link to the parent link httpp://username.github.io/test, is there other way to automatically generate this? Thanks:)
Matthew Conlen
@mathisonian
oh i see @yue899889 hmm so you have them as two separate repos? is it possible to share the code to look at the setup?
Matthew Conlen
@mathisonian
ultimately idyll generates output that is just a folder of static html/css/js so it should be possible, but i'm not sure i totally understand the setup you have now