Tutorial

[vc_row][vc_column][vc_empty_space height="50"][vc_text_separator title="Easy way to use ScrollMagic"][vc_empty_space height="50"][/vc_column][/vc_row][vc_row][vc_column][bb_vcuc dots="yes" slidestoshow="1" responsive="%5B%7B%22destroys%22%3A%22no%22%2C%22dots%22%3A%22no%22%2C%22vertical%22%3A%22no%22%7D%5D" filtering="%5B%7B%7D%5D"][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="1/3"][vc_custom_heading text="Create a scene" font_container="tag:h3|text_align:right|color:%23000000" use_theme_fonts="yes"][vc_custom_heading text="Admin panel > ScrollMagic > Add Scene.

Tab init : Settings before scrolling
Tab after: Settings after scrolling " font_container="tag:div|font_size:14px|text_align:right|color:%237b7b7b|line_height:28px" google_fonts="font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:400%20regular%3A400%3Anormal"][vc_empty_space][/vc_column_inner][vc_column_inner width="2/3"][vc_video link="https://youtu.be/5Y-fYnKHIyk" align="center"][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="2/3"][vc_video link="https://youtu.be/PHJJWa6Hm40" align="center"][/vc_column_inner][vc_column_inner width="1/3"][vc_custom_heading text="Use scene for default editor" font_container="tag:h3|text_align:left|color:%23000000" use_theme_fonts="yes"][vc_empty_space][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="1/3"][vc_custom_heading text="Use scene for all Editors." font_container="tag:h3|text_align:right|color:%23000000" use_theme_fonts="yes"][vc_custom_heading text="You can use Class CSS for any element in Editor (Visual Composer, Divi, Fusion, Cornerstone, Elementor..etc..)" font_container="tag:div|font_size:14px|text_align:right|color:%237b7b7b|line_height:28px" google_fonts="font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:400%20regular%3A400%3Anormal"][vc_empty_space][/vc_column_inner][vc_column_inner width="2/3"][vc_video link="https://youtu.be/Xk-IRK9b4t4" align="center"][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][/bb_vcuc][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height="100"][vc_text_separator title="Use multi-scenes"][vc_empty_space height="50"][/vc_column][/vc_row][vc_row][vc_column][bb_vcuc dots="yes" slidestoshow="1" responsive="%5B%7B%22destroys%22%3A%22no%22%2C%22dots%22%3A%22no%22%2C%22vertical%22%3A%22no%22%7D%5D" filtering="%5B%7B%7D%5D"][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="2/3"][vc_video link="https://youtu.be/lxocoQ11Abw" align="center"][/vc_column_inner][vc_column_inner width="1/3"][vc_custom_heading text="Use Multi-scene for default editor" font_container="tag:h3|text_align:right|color:%23000000" use_theme_fonts="yes"][vc_empty_space][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="1/3"][vc_custom_heading text="Use Multi-scene for all Editors" font_container="tag:h3|text_align:left|color:%23000000" use_theme_fonts="yes"][vc_empty_space][/vc_column_inner][vc_column_inner width="2/3"][vc_video link="https://youtu.be/6_y2KX7BBJQ" align="center"][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][/bb_vcuc][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height="100"][vc_text_separator title="Image-sequence"][vc_empty_space height="50"][/vc_column][/vc_row][vc_row][vc_column][bb_vcuc dots="yes" slidestoshow="1" responsive="%5B%7B%22destroys%22%3A%22no%22%2C%22dots%22%3A%22no%22%2C%22vertical%22%3A%22no%22%7D%5D" filtering="%5B%7B%7D%5D"][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="1/3"][vc_custom_heading text="Use Image-sequence for default editor" font_container="tag:h3|text_align:right|color:%23000000" use_theme_fonts="yes"][vc_custom_heading text="Convert your Gif to jpg images in here
http://image.online-convert.com/convert-to-jpg" font_container="tag:div|font_size:14px|text_align:right|color:%237b7b7b|line_height:28px" google_fonts="font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:400%20regular%3A400%3Anormal" link="url:http%3A%2F%2Fimage.online-convert.com%2Fconvert-to-jpg||target:%20_blank|"][vc_empty_space][/vc_column_inner][vc_column_inner width="2/3"][vc_video link="https://youtu.be/3jGqhJBhFy8" align="center"][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="2/3"][vc_video link="https://youtu.be/HcWtoSZjVSY" align="center"][/vc_column_inner][vc_column_inner width="1/3"][vc_custom_heading text="Use Image-sequence for Visual Composer" font_container="tag:h3|text_align:left|color:%23000000" use_theme_fonts="yes"][vc_custom_heading text="Convert your Gif to jpg images in here
http://image.online-convert.com/convert-to-jpg" font_container="tag:div|font_size:14px|text_align:right|color:%237b7b7b|line_height:28px" google_fonts="font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:400%20regular%3A400%3Anormal" link="url:http%3A%2F%2Fimage.online-convert.com%2Fconvert-to-jpg||target:%20_blank|"][vc_empty_space][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][/bb_vcuc][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height="100"][vc_text_separator title="Draw SVG"][vc_empty_space height="50"][/vc_column][/vc_row][vc_row][vc_column][bb_vcuc dots="yes" slidestoshow="1" responsive="%5B%7B%22destroys%22%3A%22no%22%2C%22dots%22%3A%22no%22%2C%22vertical%22%3A%22no%22%7D%5D" filtering="%5B%7B%7D%5D"][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="2/3"][vc_video link="https://www.youtube.com/watch?v=iK8ci4pVgFA" align="center"][/vc_column_inner][vc_column_inner width="1/3"][vc_custom_heading text="Use Draw SVG" font_container="tag:h3|text_align:right|color:%23000000" use_theme_fonts="yes"][vc_custom_heading text="If you don’t have any HTML SVG code, and you have SVG file, you can use this Tool to convert SVG to HTML code
https://convertio.co/vn/svg-html/" font_container="tag:div|font_size:14px|text_align:right|color:%237b7b7b|line_height:28px" google_fonts="font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:400%20regular%3A400%3Anormal" link="url:https%3A%2F%2Fconvertio.co%2Fvn%2Fsvg-html%2F||target:%20_blank|"][vc_empty_space][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][/bb_vcuc][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height="100"][vc_text_separator title="Animate CSS"][vc_empty_space height="50"][/vc_column][/vc_row][vc_row][vc_column][bb_vcuc dots="yes" slidestoshow="1" responsive="%5B%7B%22destroys%22%3A%22no%22%2C%22dots%22%3A%22no%22%2C%22vertical%22%3A%22no%22%7D%5D" filtering="%5B%7B%7D%5D"][bb_vcuc_slide filtering="%5B%7B%22value%22%3A%22red%22%7D%5D"][vc_row_inner content_placement="middle"][vc_column_inner width="1/3"][vc_custom_heading text="Use Animate CSS" font_container="tag:h3|text_align:right|color:%23000000" use_theme_fonts="yes"][vc_empty_space][/vc_column_inner][vc_column_inner width="2/3"][vc_video link="https://youtu.be/Qw_xhNgmztY" align="center"][/vc_column_inner][/vc_row_inner][/bb_vcuc_slide][/bb_vcuc][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height="100"][/vc_column][/vc_row]