[av_section min_height=” min_height_px=’500px’ padding=’large’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ id=” color=’main_color’ custom_bg=’#ffffff’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′]
[av_three_fourth first]

[av_heading heading=’SCROLLING PANELS IN ARTICULATE STORYLINE’ tag=’h3′ style=’blockquote modern-quote’ size=’40’ subheading_active=’subheading_below’ subheading_size=’20’ padding=’0′ color=’custom-color-heading’ custom_font=’#86868′][/av_heading]

[/av_three_fourth]
[/av_section]

[av_one_half first]
[av_video src=’https://vimeo.com/126918682′ format=’16-9′ width=’16’ height=’9′]
[/av_one_half]

[av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_display=”]
[av_icon_box position=’left_content’ boxed=” icon=’ue8d1′ font=’entypo-fontello’ title=’About’ link=” linktarget=” linkelement=” font_color=” custom_title=” custom_content=” color=’custom’ custom_bg=” custom_font=’#70bfea’ custom_border=’#70bfea’]
One of the main build in features of Articulate Storyline are scrolling panels. Scrolling panels can be used for all kind of stuff that don’t fit well within the space on your slide, especially for large amounts of text and large images.

One of the most requested updates within the Articulate community was the possibility to change the look and feel of the build in scrolling panel.

With the release of Storyline 2 this request was not granted yet, but with the new build in Slider-feature, you create your own scrolling panel quite easily. In this blogpost I will show you how to do it.

Note: Check out the video on the left for an quick overview!
[/av_icon_box]
[/av_one_half]

[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]

[av_section min_height=” min_height_px=’500px’ padding=’no-padding’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ id=” color=’main_color’ custom_bg=” src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′]
[av_three_fifth first]

[av_heading tag=’h3′ padding=’20’ heading=’GETTING STARTED’ color=” style=” custom_font=” size=” subheading_active=” subheading_size=’15’ custom_class=”][/av_heading]

[av_textblock size=” font_color=” color=”]
Below, I ‘ll explain every single step of the whole process:

Step 1

Insert a text box an add your text to it. If you want to use fake-text like I did you can enter the code =lorem()

Step 2

With the text box selected go to the ‘state – tab’ and add 14 new states to your text box. After this you need to change the position for every single state. To do so, right click your textbox and choose the option ‘size and position’. In the window that opens choose the option position and set the vertical alignment for state nr 1 to minus 22, for state nr 2 to minus 44, for state nr 3 to minus 66 etc.

Step 3

Insert a slider. Set the end point of your slider to 14, change the look of your slider to your own needs and rotate the slider with 90 to the right. Finaly position your slider right next to your text box.
[/av_textblock]

[/av_three_fifth][av_two_fifth]

[av_heading heading=’END NEXT’ tag=’h3′ style=” size=” subheading_active=” subheading_size=’15’ padding=’20’ color=” custom_font=”][/av_heading]

[av_textblock size=” font_color=” color=”]
Step 4

Add a new trigger to your slider, that says…Change state of textbox to normal, when slider 1 moves and value is equal to 0. Copy / past this trigger for all the states of your text box and change the value of the triggers. For example: the second trigger says…Change state of textbox to 1, when slider 1 moves and value is equal to 1……the third trigger says…Change state of textbox to 2, when slider 1 moves and value is equal to 2. etc etc

Step 5

To finish your project and to give your scrolling panel the right look and feel copy / past your background image twice and crop them to your own needs. Position these just above and below your slider.
[/av_textblock]

[/av_two_fifth][av_hr class=’invisible’ height=’25’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]

[av_one_third first]

[av_image src=’http://www.eyespirations.com/wp-content/uploads/2015/05/Schermopname-159.png’ attachment=’874′ attachment_size=’full’ align=’center’ animation=’no-animation’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’][/av_image]

[/av_one_third][av_one_third]

[av_image src=’http://www.eyespirations.com/wp-content/uploads/2015/05/Schermopname-158.png’ attachment=’873′ attachment_size=’full’ align=’center’ animation=’no-animation’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’][/av_image]

[/av_one_third][av_one_third]

[av_image src=’http://www.eyespirations.com/wp-content/uploads/2015/05/Schermopname-160.png’ attachment=’875′ attachment_size=’full’ align=’center’ animation=’no-animation’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’][/av_image]

[/av_one_third][av_hr class=’invisible’ height=’25’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]
[/av_section]

[av_two_third first]
[av_heading heading=’Happy scrolling’ tag=’h3′ style=’blockquote modern-quote’ size=’40’ subheading_active=’subheading_below’ subheading_size=’15’ padding=’10’ color=’meta-heading’ custom_font=”][/av_heading]

[av_textblock size=” font_color=” color=”]
I hope you enjoyed reading this blog about drawing your own cartoons. I love to hear your ideas or suggestions about this topic.

For more information about this entry or see this submission in action, feel free to use the demo or download (Storyline 2) buttons at the right.
[/av_textblock]
[/av_two_third]

[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_display=”]
[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]

[av_button label=’DEMO’ link=’manually,http://www.eyespirations.com/wp-content/uploads/articulate/templates/scrollpanel_post/story.html’ link_target=’_blank’ size=’large’ position=’left’ icon_select=’yes’ icon=’ue826′ font=’entypo-fontello’ color=’theme-color’ custom_bg=’#444444′ custom_font=’#ffffff’]

[av_button label=’DOWNLOAD’ link=’manually,http://www.eyespirations.com/wp-content/uploads/articulate/files/scrollpanel_post.story’ link_target=” size=’large’ position=’left’ icon_select=’yes’ icon=’ue826′ font=’entypo-fontello’ color=’theme-color’ custom_bg=’#444444′ custom_font=’#ffffff’]
[/av_one_third]

[av_hr class=’invisible’ height=’100′ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’]

[av_partner columns=’5′ heading=” size=’portfolio_small’ border=’av-border-deactivate’ type=’slider’ animation=’slide’ navigation=’arrows’ autoplay=’false’ interval=’5′]
[av_partner_logo id=’28’ hover=” link=” linktitle=” link_target=”]
[av_partner_logo id=’29’ hover=” link=” linktitle=” link_target=”]
[av_partner_logo id=’30’ hover=” link=” linktitle=” link_target=”]
[av_partner_logo id=’31’ hover=” link=” linktitle=” link_target=”]
[av_partner_logo id=’32’ hover=” link=” linktitle=” link_target=”]
[/av_partner]