Scrollsequence Watch Example Tutorial

Scrollsequence WordPress Plugin - Watch Example Tutorial Deconstructed
Step by step tutorial that shows how the "Watch" example was made. You can see the live example below.
Live Example:
scrollsequence.com/scrollsequ...
Source files:
scrollsequence.com/scrollsequ...
Documentation:
scrollsequence.com/documentat...
How to convert video to image sequence:
scrollsequence.com/how-to-con...

[@bang-bangtv1116]

awesome !

[@bySterling]

A M A Z I N G!!

[@evilisevilgoodisgood1421]

You can do this with lottie, make the sequence yourself. No need for plug-in.

[@peterlaverty9397]

But lottie is only pro. So also have to pay for it?

[@davidedthinkin9679]

Awesome plugin! Unfortunately I saw that you changed your pricing since January? Is there a way to still get the old Lifetime deal? That had a much better bang for the buck.

[@scrollsequence]

Yeah, the pricing has changed and it will change again soon, so grab it while the price last.

[@eliezerciriaco8356]

how to make image sequence fadeout on scroll?

[@skxyz8202]

The first mouse wheel step seams to be moving the whole page down. After its done the animation works great. You see it happening in the watch tutorial, it happens on your website as well. The rocket / robot / woman website examples don't have the issue. Has anyone figured out what is causing it? I think it is linked to stretching the image but I wasn't able to verify.

[@scrollsequence]

This is because the animations sticks to the screen using the Javascript and not the native CSS Sticky - there is a setting to improve that, that works with most themes. Try setting "CSS Sticky" in the plugin options and you should not see that one-frame glitch.
(PS: We use 2020 Theme where the CSS sticky does not work because of overflow:hidden css property, so we had to use the poor performing, but compatible Javascript Sticky option)

[@peterlaverty9397]

Nice tutorial thanks. I uploaded a PNG sequence that has a transparent backround but when I add it with short code it has a white backround that does not match my page that is also white. Any ideas what I can do? I am using elementor and wordpress. Thanks.

[@scrollsequence]

Hi, can you email us on support at scrollsequence dot com and Jamie will help you out with this issue.
Ales

[@rubenmoons780]

Hey is there a way to make it so the page itself will keep scrolling when playing the animation? So you dont have to wait to fully play the animation to see other content on the page?

[@aleskozelsky7422]

Hi Ruben, yes this is possible via shortcode margintop and marginbottom parameters. Let's say that you want the content AFTER the sequence to overlap with your page by 1000px.
[scrollsequence id="your_id_here" marginbottom="-1000px"]
This will set a negative margin, effectively overlapping with the content below the sequence!
Let me know if this works for you.
Ales
Plugin Author

[@rubenmoons780]

@@aleskozelsky7422 Hey this is almost what i am looking for. The page content now scroll accordingly but the animation is still in the middle of my screen. I want the animation to also go away with the page content. If I am unclear i can send you a demo of what I want.
Thanks for the help

[@rubenmoons780]

@@aleskozelsky7422 If its only in the pro version, thats no problem im allowed a budget much above of the pro version cost so i just need to know if its possible

[@aleskozelsky7422]

@@rubenmoons780 Hi Ruben, this behavior is not possible. Scrollsequence automatically fixes the content so it is visible during animation. Imagine that you are on a very small screen - the animation would be off-screen and you could not see the animation moving.
(I have replied you earlier, but I cannot find the answer here)

[@mojoswift]

Is there a limit on the number of files per scene? (100?) Are only 3 scenes allowed? So only a total number of 300 images are allowed?

[@scrollsequence]

Hi Christian,
The free version has this limit due to a simplified JavaScript animation engine. In the pro version the limit is not there, because GSAP takes care of the performance.
So to answer your question: 300 images maximum in free version and theoretically no limit in the pro version.
Ales
Plugin Author

[@borisnieminen677]

Hi, how did you get the "id" in your heading? @ 03:41 When I enter my text I want to animate and verify with the text tab, all I see is "scroll" How do I obtain he "id"?

[@scrollsequence]

You can write it there in the text tab. Let me know if it helped :-)

[@borisnieminen677]

@@scrollsequence Thanks, I eentually figured it out eventually. I think you skipped that part, but yeah, you have to enter it in. Good to know for non-coders like me ; ) Cheers, great plugin.

[@alejandraMarsalGausi]

Hello, how you can add this to oneof your wordpress pages? with css?

[@scrollsequence]

just add the [scrollsequence id="your_unique_id"] shortcode to any page and it will display the sequence on your page of choice.

[@v3solution453]

Bro, Which Theme are you Use?

[@scrollsequence]

Standard TwentyTwenty theme from WordPress

[@niyantpawar8447]

My sequence is just sticking to the top of the page please help

[@scrollsequence]

Hi, could you please contact me either on support forum wordpress.org/support/plugin/scrollsequence/ or on email info at scrollsequence and I will do my best to help you there :-)

[@v3solution453]

bro if we have 300 Pictures then what we do ??

[@scrollsequence]

Same thing :-) Just add them to the plugin UI, it can take thousands in the PRO version. Just make sure to optimize them so they don't take long to download.

[@v3solution453]

Okay Thanks Bro I tried it @@scrollsequence

[@rayn_0ff]

The live example doesn't work. JQuery is MIA.

[@scrollsequence]

Hi, I have just tested and all works fine on my end. Can you confirm the URL scrollsequence.com/scrollsequence/watch ?

[@v3solution453]

Plese make tutorial In free version

[@stylrart]

What watch is that?