Introducing Scrollyplay & Scrollytelling: Apple Elegance meets the Power of Elements

[Invisigoth (Chris)]

Hi everyone!

I’m Christian, and I’m thrilled to join the Elements developer community. Before landing here, I tried every type of visual or semi-visual website editor out there, but only with Elements did I find full expressive possibility and the right inspiration to create something truly wonderful. It is a system that allows for incredible results in a wonderfully simple way.

I created Scrollyplay and Scrollytelling because I never found such an intuitive way to integrate high-level cinematic effects into web pages. Before Elements, I used custom-built components for my own projects to fill this gap; now, thanks to this platform, I can finally share them with all of you.

These tools allow you to manage extremely complex animations from any source: AI-generated videos, professional assets, or original footage. To give you an example of the system’s versatility: one of the animations on my website was created simply using Apple Keynote.

The Components:

• Scrollyplay (Video): Synchronizes every frame of a video to the user’s scroll for total cinematic control.

• Scrollytelling (Images): Uses image sequences (JPG/PNG) for flawless photographic quality and absolute smoothness.

Updates and Special Offer: I am already working on several improvements that will be released very soon. My advice is to take advantage of the current discount on the Store now: once purchased, the components are yours forever, including all future updates.

Support and Community: In addition to the components, I am about to release a free application for quick frame extraction from videos, which I will make available to the entire community to support your workflows.

I also suggest visiting my website www.sassano.me to see some real-time integration examples.

I can’t wait to see what you create! For any questions, requests, or help, I am at your complete disposal here on the forum. Just mention me in a post to make me “drizzare le antenne” (alert me), and you’ll get my support right away.

Magic lies in simplicity. Christian

[MarcL (Marc)]

Great additions to Elements!

So storytelling is designed for timelpase sequences or images sequences created from video, or both?

[Invisigoth (Chris)]

Great question! Scrollytelling is designed to handle both scenarios with maximum fluidity.

You can use it for native timelapse sequences (photographic shots) or for frame sequences extracted from a video.

[Tom77 (Tom)]

Hey Chris, yesterday I bought these two extensions for Elements. It took some time to find the right settings for a smooth result. It would be very helpful if you could publish a tutorial on YouTube about how to implement your extension in a website. A downloadable file with various application examples would also be useful as well. Have you made your Website www.sassano.me with elements and the Plugin? Best regards, Tom

[dan]

@Tom77, The component(s) each include sample projects, just go to the New Projects windows. We’re recommending developers include a sample project so hopefully most things you buy on the store will have this

[Tom77 (Tom)]

I got it… Thank you for the quick help.

[Invisigoth (Chris)]

Hi @MarcL, first of all, thank you so much for your purchase and for the trust you’ve placed in my work: it truly means a lot to me!

I want to let you know that I’m currently preparing a YouTube video specifically to explain in detail how to best integrate the component into your projects and showcase its full potential. Furthermore, I’m already working on a new update for both components (Scrollyplay and Scrollytelling); these are technical improvements, perhaps invisible to the end user, but necessary to ensure an ever-better and smoother experience.

I can confirm that my website (www.sassano.me) was built entirely and exclusively with Elements, using these very components to achieve the cinematic effects you see there.

I’d also like to publicly thank the great @dan for responding so promptly and pointing out the example projects section included in the package; that section was added specifically following Dan’s invaluable suggestion to help you get started on the right foot immediately.

I am at your complete disposal for any kind of help, including direct contact if you ever need it. Don’t hesitate to ask!

[MarcL (Marc)]

You mention on your product page that you optimise for video at 60fps. Coming from a video background myself in the UK & European areas we tend to shoot 25, 50fps (PAL) I know many of the DJI and similar type camera and even iPhones default to 30 and 60fps.

Just something to think about because most video pro’s won’t be using 30 - 60 if they are going to be using some of their own video content on their sites.

[Invisigoth (Chris)]

Great observation! The mention of 60fps on the product page is purely indicative and does not represent a technical limitation of the component.

You can use any frame rate you desire (24, 25, 30, 50, 60 fps or beyond); Scrollyplay will adapt perfectly. The truly critical aspect for achieving flawless fluidity isn’t the frame rate itself, but the frame structure of the video file. As noted on my website, the golden rule is:

• Export from your favorite video editor by setting the Keyframe Interval to 1 (Closed GOP).

• For AI-generated files or stock resources, we suggest optimized conversion with HandBrake:

  • General Options: ‘Web Optimized’

  • Advanced Options: keyint=1

This ensures that every single frame is an ‘I-frame,’ allowing the component to seek through the video instantaneously during scrolling, regardless of the standard (PAL or NTSC) you are using.

[Invisigoth (Chris)]

Hi everyone!

Just a quick heads-up: a new update is coming very soon! This release will introduce exciting new customization options designed to make every creation using Scrollytelling and Scrollyplay components truly one-of-a-kind.

Get ready to take your projects to a whole new level of uniqueness. Stay tuned!

Let’s scrolly!

[spooner (Martyn)]

hi @Invisigoth — really enjoying the Scrollytelling component, thank you for building it.

back on 22 april you mentioned new customization options were on the way. i wanted to ask about one specific thing: is there any plan to let us lay live text over the image sequence, as a real text element rather than text baked into the frames?

right now i’m burning the captions into the JPGs, which works but has two downsides — it isn’t readable by search engines or screen readers, and it can’t reflow, so on a narrow portrait phone screen the text ends up cropped or off the edge.

so really two questions:

1. is a native text-overlay option coming?
2. if it is, would that text reposition / reflow responsively at mobile breakpoints, so it stays on screen in portrait?

no rush at all — just trying to decide whether to keep baking text in or wait for a cleaner way. thanks again for the great work.

[Invisigoth (Chris)]

Hi @spooner and hi to everybody,
sorry for the late reply — I’ve been away for work over the last few days and I’m only just catching up on the forum now.

In the meantime I’ve been working very hard on my new component suite, Motion Forge, which is driving all the upcoming animation updates. I’m preparing a new release right now.

You’re absolutely right: baking text into the images, as you’re doing at the moment, isn’t ideal for accessibility or responsive behaviour. I fully understand your concerns about search engines, screen readers, and text reflow at mobile breakpoints, especially on narrow portrait phone screens. Your use case is definitely on my radar as I explore how to refine the component in future iterations.

In the meantime, I can suggest a pseudo‑solution that might help cover your use case, at least partially:

• you can use the lower area of the component and drop in a full‑width container with the live text you need;

• additionally, you can make use of the “overlap” of the following section, placing a text block there so it visually overlays the image sequence as the user scrolls.

To make this clearer I’ve put together a small demo project, which I’m attaching here in the thread so you can see exactly how these approaches behave in a real layout. Of course, I’m completely at your disposal if you have any questions or if you’d like help tailoring the structure to your specific project.

Thanks again for the thoughtful feedback and for using Scrollytelling — real‑world use cases like yours are exactly what helps me decide which features to ship next.

Download Demo TextOverlay