107298736014493738340Q: Thanks for this offer!
Could you quickly elaborate in what way Scrollsequence differs from tools like ScrollTrigger or ScrollMagic?
I have a few performance concerns…
Does Scrollsequence work with CDNs? One likely needs to serve the first frame locally, but can the remaining images get served via CDN?
Many CDNs also let you stream video – would this also work as input for your product?
ales9
May 14, 2024A: Hi,
ScrollTrigger is a Javascript Library from GSAP product range. It is being internally used by Scrollsequence. ScrollMagic was an early version of ScrollTrigger by a third party, I don't think it is supported anymore. Again just a Javascript library for programmers. Not related to WordPress.
Yes, we recommend using WP Rocket with RocketCDN. But even other CDN services should work as internally we use wp_get_attachment_image_src() which is a standard WP function for getting the image URL.
Video is not currently supported, but it's being considered as an option. The problem with video is the format of video (encoding/decoding) where the users would need to ensure correct encoding is applied to the video format, and also some devices have different decoders, so it's not so simple to make the same thing with video. Nevertheless it is doable, but would require some kind of cloud encoding/decoding step that is not finished yet.
Hope that answered some of your questions :-)
Ales
Thanks for your very thorough answer, Ales. Yes, that has answered my questions!
Happy days :-)
Verified purchaser
I would asume, that videos would greatly decrease the file size because of the really great compression methods. Is there any timeline for a "manual" video approach? Because the size savings should be about 10x I assume
Hi martin651,
Yes, I have looked at the possibility of using the video directly. It can be done, but it's got many hoops to jump through. I certainly want to look at it again. Below are the considerations:
- various devices decode videos in different ways. To make this work on all devices, you would have to have a set of different video formats and resolutions and serve them according to the device.
- to be able to scrub through video, you have to have a lot of "keyframes" - and having each frame as a "keyframe" effectively makes the video the identical size as a bunch of images. (https://blog.video.ibm.com/streaming-video-tips/keyframes-interframe-video-compression/)
- loading times would be in fact slower, because now we can show the animation almost instantly and load the image frames using normal distribution, thus loading the frames in order of probability they will be displayed on normal scroll - where the video loads linearly, and you may end up waiting longer for it to be playable/scrollable.
I have a working "MVP" of cloud conversion from a input video to a scrollable video format, so one can just drop any video and have a scrollsequence as output within seconds, it works, but I could not achieve better end results with using video.
Currently the development is focusing on making a cloud conversion tool that converts video to still images that are automatically fed to WordPress installation. Hoping to release it soon and make it part of the plugin.
Ales
Plugin Author
Verified purchaser
Hello,
thanks for the detailed response. Actually I gave another thought as well and I understand the issues you are mentioning. Also, the most compression methods in video are just about forward playback. If you are working on a "cloud" conversion method anyways, did you give transparent layers a thought? Maybe 5 layers visible at everytime with just the differences in every layer? Would have to be tested if that decreases the size but i think with webp it could :)
Great work anyways, my only concern at the moment is the filesize.
The cloud conversion uses FFMPEG library to convert video->jpg. Transparency I haven't considered to be honest (I definitely should have!) because it can create some cool effects.
There is an article below on file size tips. I generally didn't get much better results with webP, but maybe I was doing it wrong.
https://scrollsequence.com/bulk-image-optimization-options/
Ales