Tutorial

Tutorial

Easy way to use ScrollMagic

[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”]

Create a scene

Admin panel > ScrollMagic > Add Scene.

Tab init : Settings before scrolling
Tab after: Settings after scrolling

[/bb_vcuc_slide][bb_vcuc_slide filtering=”%5B%7B%22value%22%3A%22red%22%7D%5D”]

Use scene for default editor

[/bb_vcuc_slide][bb_vcuc_slide filtering=”%5B%7B%22value%22%3A%22red%22%7D%5D”]

Use scene for all Editors.

You can use Class CSS for any element in Editor (Visual Composer, Divi, Fusion, Cornerstone, Elementor..etc..)
[/bb_vcuc_slide][/bb_vcuc]

Use multi-scenes

[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”]

Use Multi-scene for default editor

[/bb_vcuc_slide][bb_vcuc_slide filtering=”%5B%7B%22value%22%3A%22red%22%7D%5D”]

Use Multi-scene for all Editors

[/bb_vcuc_slide][/bb_vcuc]

Image-sequence

[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”]

Use Image-sequence for default editor

Convert your Gif to jpg images in here
http://image.online-convert.com/convert-to-jpg
[/bb_vcuc_slide][bb_vcuc_slide filtering=”%5B%7B%22value%22%3A%22red%22%7D%5D”]

Use Image-sequence for Visual Composer

Convert your Gif to jpg images in here
http://image.online-convert.com/convert-to-jpg
[/bb_vcuc_slide][/bb_vcuc]

Draw SVG

[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”]

Use Draw SVG

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/
[/bb_vcuc_slide][/bb_vcuc]

Animate CSS

[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”]

Use Animate CSS

[/bb_vcuc_slide][/bb_vcuc]