Welcome to the World of Scrolly.

NOTE: It is important that you work on as large a monitor as possible and that you have optimally adjusted the menu in the top left via the INTERFACE ZOOM.

Here comes the first HTML box on Slide 3. These (responsive) text boxes guide the reader through the story. You can see the text input field for editing in the top right of the frame. You adjust the appearance of all HTML boxes in the bottom right in the first tab. The boxes are always positioned above the entire scene. Behind them is a three-dimensional WebGL space, which may still appear two-dimensional to you for now. 😉 Please click next slide.

Now let's go to the upper page. Please click on the small field  1:1 . Now you can see the entire stage in the preview window in the middle. From left to right: Next to the language selection (choose  EN ), you can adjust the menu size to your screen (+/-). In the middle, you can simulate how the scrolly will look later on which device and in which aspect ratio. Ignore the preview zoom at this point for now. What's more important is what comes next: The Safe Area shows the middle section with a  green square . The information in this section can be viewed on virtually any device. For now, press  ALL OFF  and click to go to the next slide.

When you create your first scrolly later, you should start with simple assets. Here it's simply an image that appears from below and disappears again at the top. As you can see in the colorful menu at the bottom left, you can place and animate any type of assets in the scrolly. You can click on Preview at the top left in the menu right now to see and scroll through how the scrolly will feel later. Then come back here by clicking x and click through to the next slide.

Of course, you can also use video and audio files. However, make sure that all assets you use don't have too large a file size so that the overall file size of the scrolly remains small. Especially with poor internet access or older devices with little video memory, you'll notice if a scrolly is over 100 MB in total.

The possibilities in this editor are extremely flexible, as we combine a 2D world with a 3D world. Even though it may appear otherwise, the SVG or infographic here consists of vector data and sits above the 3D scene, between the WebGL 3D space and the HTML windows. Nevertheless, we can also convert these objects into a 3D object – in which case it is rendered and behaves differently in 3D space. You can see this, for example, in our star logo above, which can be both a 3D object and, to its right, an SVG. Please go to the next slide.

As you can see, real 3D data is now suddenly coming into the space. These can cast and receive shadows or reflect each other.

Please click to the next slide.

The tool offers you an incredible space to let your creativity run free. But please start from the beginning in peace and quiet first. ;-) Please click to continue.

Start very simply and follow these instructions. If you have read this, click continue once more.

A very important thing you need to know: You can freeze the state ( POSITION / ROTATION / SCALE / OPACITY ) of an asset with a keyframe! After you've uploaded an image (maximum width and height of 4096px), activate the checkbox next to POSITION and change the Y slider. Now move one slide further down in the timeline and change the position again. This way you've created an animation. The keyframes also appear at the bottom in the timeline. If you activate the HANDLER at the top in the view, you can also move or rotate the object directly. Keyframes are created here automatically.

And now, have fun with the tool. There's still so much to discover. We're already planning more tutorials and support resources.

THE END.