To restate the problem statement: I have a song tiddler containing lyrics and musical notation. I want to click on a button on the tiddler's toolbar and prompt the browser to slowly scrolldown to the end of the tiddler at a rate such that I can keep playing, hands free. As eric says: "Sort of like an automatic page turner for a performing piano player. "
On Wednesday, July 8, 2020 at 5:57:04 PM UTC+5:30, Adithya B M wrote: > > Eric, You understand the problem perfectly. > > [image: Screen Shot 2020-07-08 at 5.43.11 PM.png] > > > Mat, thanks for the direction. I have been able to add the button as per > your direction. > > How do I proceed from here? Should I try to add an event handler for > "tm-scrollthrough-tiddler"? > > On Wednesday, July 8, 2020 at 7:07:04 AM UTC+5:30, Eric Shulman wrote: >> >> On Tuesday, July 7, 2020 at 3:16:16 PM UTC-7, TW Tones wrote: >>> >>> if I understood your needs I could give a better answer. >>> >> >>> On Tuesday, July 7, 2020 at 11:37:23 PM UTC+10, Adithya B M wrote: >>>> >>>> I have been using TW as a songs database for some time. I want to add >>>> Autoscroll functionality to individual tiddlers... >>>> >>>> ... 3) Execute the scrolling action with appropriate speed. >>>> >>> >> Based on their referring to a "songs database" and "scrolling...with >> appropriate speed"... >> >> I would guess that they want to be able to scroll a "song" tiddler >> containing lyrics and perhaps musical notation, >> and do so at a rate such that they can play along *hands-free* as the >> tiddler scrolls down up the page. >> Something that lets them follow the music while using both hands to play >> their instrument. >> Sort of like an automatic page turner for a performing piano player. >> >> I'm thinking perhaps some CSS transforms, e.g., translateY(-20em), to >> "scroll" the tiddler body content, >> combined with some timed transitions, e.g., "transition: translateY 20s;" >> to control the rate at which it >> moves, and perhaps some clipping with overflow:hidden so the content >> doesn't "leak out" into it's >> neighboring tiddlers. >> >> https://www.w3schools.com/cssref/css3_pr_transform.asp >> https://www.w3schools.com/css/css3_transitions.asp >> >> I've done some minor CSS animations using transforms and transitions, but >> it can be kind of tricky >> to get it right. If I have some time to play around with it, I'll see >> what I can do... >> >> -e >> >> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ead30da4-8717-4fe5-b595-05ffccc93196o%40googlegroups.com.
