Slider Revolution 6.0 - Scroll Based Keyframes (Example Download in Description)

You can download the final result of this quick tutorial here:

A few remarks when creating a scroll based scene:

Layers that have timeline scroll based handling "enabled" are only animating depending on their scroll position.
To prevent them from just "popping up" when the module loads, this trick can be used:

1. Place the layer that should animate on scroll inside a group
2. Disable the scroll based handling for the group
3. Add an animation to the group, which will be played time based (this is your smooth in-animation for the layer!)
4. The whole timeline duration is mapped on the height of the module in the frontend. This is why you need to space out the keyframes of your scroll based animation layer.
5. Add a short keyframe in which the layer will be visible immediately (The group will be the in-animation) and place a longer keyframe at a later point in the timeline.

In addition, the "fixed during scroll" option allows you to specify a range on the timeline during which the module will be in a fixed position.

More info in the documentation:

Enjoy the power of Slider Revolution 6!

For more information visit:

Buy a regular license for $29 (VAT may apply):
(1 license per website required)

Creating rich, dynamic content for web pages has never been easier.

200+ templates are included in our online library. Cutting edge designs. Easily customized.

From simple galleries, to landing pages, to complete websites:
Slider Revolution is the All-In-One WordPress Builder.

Over 7 million users worldwide value the power and flexibility of the Slider Revolution WordPress Builder.

Music Track:
Hip-Hop This
Music Broadcast (10 million license)

[alexlytle]

there is a steep learning curve to slider revolution but it has some really awesome capabilities

[chrishayes]

This video helped me a lot. My slider is soo polished and really pops to hook visitors with persuasive messaging. My competition are gonna be waking up at 2am with panic attacks and cold sweats with visions of that slider converting all their customers to mine 😆

[KarimLounesDiving]

Thanks for this tutorial. Is it possible to have multiple slides, then when we scroll the navigation moves to the next slide? I am having hard time implementing that.

[nikasxy]

Hello. I have a big problem. I am watching your video about repeating all the actions exactly the second day! My Fix during Scroll is not activated. There is no selection at all. I turn on all the sliders that need to be turned on, but then I can’t turn them off until I restart RS. What should I do?

[BentoSauvage]

I used Gsap to make that, but this plugin seems easy to use. can we have multi slides and using the scroll based animation for all these slides?

[ortem]

Please only do videos with voice-overs going forward. This can be a challenge to follow. Thanks!

[dianarahim]

Hi, i have downloaded the file and uploaded it to my slider revolution, but why the words overlapping and not same as shown in the video?

[Qamil]

Hey. Can this slider control image sequance based on mouse opsition over X axis? Or video keyframe?

[superKazod]

Looks very nice, can it scroll "inside" a video/image sequence?

[natlip]

One thing that this video did not show, which is pretty important and took me on a few hour goose chase...

Problem: Every time I did the keyframe scroll when scrolling all of my text would shift left.

[Publikschoolpro]

I have a video that's about 16 sec long and I've tried on the lower settings and 1 fps but is continues to be suck on (loading full video... video files size :NaNMB)

[cliffordsuquib]

why is it that when I'm scrolling it the first and second is going to back and compress to the second line?

[SenorMeoSanchez]

Hey, thank's for the video and for this amazing plugin!
I am not able to use the fix during scroll! I have set up the layout to full width, and I can enable the fix during scroll, but the time range doesn't appear and if I save and reopen is disabled!

[ericx]

Hey Ho!
Thanks for the Vid..
I have a little Problem.. It works. But the group and the background jumps directly into the navigation while scrolling. (The background is not in the group) After the "fix during scroll" area, it jumps back to its regular position.
Any idea? Perhaps a bug?

[DylanCyr]

This feature REALLY needs a deep dive. The documentation isn't great, and this video would have been much better served with a voiceover explaining the options vs the background music.

[darthschrader]

I really need more info on Scroll Based Keyframes. PLEASE!!!

[bellhogardecoracion]

I have downloaded the slider and uploaded it to my website, when doing the test, I have seen that when I scroll the slide it does not jump to the next slide. I have tried to follow the steps doing it myself from scratch and it does not skip slides either. What could be the problem?

[sjorum]

Hi! I'm looking for a solution to create an 'on scroll' effect like the AirPods website. Basically 'play video on scroll'. Is that possible with Slider Revolution too? :)

[evermunt]

Trying to create a Shape that fades out when scrolling down, just like the themepunch home page has (first section). This is NOT 'easy'. We need WAY more examples... I placed the shape in a group, Handling set on scroll based, but the shape never appears. The documentation is not sufficient. Have to fallback onto the just try everything tactic, this is no fun and time consuming :-(

[johnduong]

Hi, does this only work on full screen slides? I've been trying to apply this fixed scroll effect on a banner that has a max height of 500px but when I do this, it leaves a large gap between the slider revolution and the next row. When I start scrolling the animation works and the gap starts to close but is there a way to get rid of the initial gap? Thanks