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!