• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

  • Home
  • Adding Coloumns with Layout Shortcodes
  • Customizing Slider Layouts
  • Controlling Slider Height
  • Adding Easing Functions

Adding Easing Functions


Master Slider uses GreenSock animation tool to animate contents. To find the supported animation easing functions, check out?GreenSock Ease Visualizer.

<div id="masterslider" class="master-slider">
      <div class="ms-slide">
        <!-- .... -->
        <div class="ms-layer"
             data-type="text"
             data-offset="{x:100px; y:100px}"
             data-animation-in="{duration:1.3; delay:1; from: true; x:-300px; opacity:0; ease:Quart.easeOut;}"
        >
          Text layer content here...
        </div>
        <!-- .... -->
      </div>
      <!-- .... -->
    </div>

Was this information helpful?

Submit
Previuos Step
Related articles list
Create New Support Ticket

Maybe You're Searching For These

Phlox Search
Changing Slider Skin
Enabling Wheel Navigation
Phlox Accordion
Update Troubleshooting
Displaying Related Posts on your Blog
Phlox Divider
Getting to Know the Options
Copyright © 2017 Averta. All rights reserved.