Scroll down code

Please specify version and format if asking for help, or apply optional tags above:
Twine Version:2.13
Story Format: sugarcabe

Hi all,
total coding noob here.
I’m trying to implement a simple scroll down transition between Passages in twine2. Here’s an example of my project without scrolldown transtions:

Thesis Each image is a separate individual twine Passage in this format:

< a data-passage=“diving” > < img src=“image.jpg” alt=“alternate” border=“0” >

I found this <> macro example: <<timed macro>> Autoscroll Twine 2 Sugarcube - Twine Q&A and copied it into my project’s Story Javascript area. However, I’m new to coding and I need help with how to edit the Javascript and how to implement the <> tags in each of my Passages.

I just want the page to scroll down to the next Passage when the image link is clicked.

Any help would be greatly appreciated.

Tags for passages are added on top of the passage, it’ll be under the title name with the button +Tag. Just type the tag name in there and your good to go, colouring is for your own sake and have no impact on the tag itself. It’s case sensitive so be careful about that.

Tags for individual parts are added like this:

@@#tagName; 
tagged passage 
@@

You can check the equivalent and its usages in the Sugarcube documentation under Custom Style.
Sugarcube Documentation

From what I can see the macro you’re looking at doesn’t let you transition between passages with the scroll, only letting you scroll down on the passage itself. You could just combine all the images in one passage and do that, or you can leave a bit of a gap at the bottom so that the scroll works and use <<goto>> to transition between passages, it’ll just act like a normal transition with a scroll animation before it.

As for how to make an actual scroll transition, I’m not good at CSS so I can’t answer that but I did find this. https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

Hope this helps. :grinning_face_with_smiling_eyes:

I’m not quite clear about what you’re asking, since this forum tends to eat SugarCube macros, thus part of what you wrote isn’t visible. You should wrap any code within a “Preformatted text” block (use the </> button on the editor toolbar) so that it will appear properly.

That said, my <<ScrollTo>> Macro may be what you’re looking for. You might want to take a look at that code, as well as some of the other code in my Twine/SugarCube sample code collection.

Hope that helps! :slight_smile: