How to Change Text Color Using Elementor Magic Scroll Addon

Elementor Magic Scroll is a new global Addon in Premium Addons Pro for Elementor that allows you to create sophisticated animation effects on page scroll by applying many types of scroll effects to any Elementor element. Visit the documentation article to know more about this addon that has been built exclusively for Elementor Page Builder.

In this article, we will show how to change an Elementor element text color on scroll.

Change Text Color on Scroll Using Elementor Magic Scroll Addon

Requirements:


How to Change Text Color on Scroll in Elementor?

After adding the Color animation effect to the Elementor element using Premium Magic Scroll addon (Check this article to know how to do that), you will see two options to apply this effect on the Element Container or Custom CSS Selector. We will discuss these two options and how/when to use them with examples.

1- Apply Color Scroll Animation Effect On Elementor Element Container.

Use this option to apply color animation on all the elements inside the main Elementor element container.

Note: The color will be applied on the elements if they don’t have colors set to them from the widget settings.

An example of that,  we are going to apply the color animation effect on a custom text paragraph inserted using the Elementor HTML widget. And this paragraph text doesn’t have a CSS color set to it.

  1. Enable Magic Scroll feature to the Elementor HTML widget. Check this article to know more about how to do that.
  2.  Add color animation effect to the Elementor element.
  3. Choose Element Container from Apply Animation On.
  4. Select the color you want. This will be the color the animation will end at.
Color scroll effect using Premium Magic Scroll Addon for Elementor
Add Color Change Scroll Effect Using Elementor Magic Scroll Addon
Change Color on Scroll Animation Using Premium Magic Scroll Global Addon

2- Apply Color Scroll Animation Effect Using Custom CSS Selector

You can use this option to apply the color change scroll effect to multiple elements in the same Elementor column/widget if they have the same CSS selector or apply an Elementor color change effect to a specific Elementor element.

An Example of Applying Elementor Color Animation Effect to Multiple Elementor Elements Using Elementor Magic Scroll

Suppose we have multiple Heading widgets in the same Elementor column container and we need to apply the same color animation effect to all of them at the same time. So, we should do the below steps

  1. Enable Magic Scroll feature to the column element. Check this article to know more about how to do that.
  2. Add color animation effect to the scene.
  3. Choose Custom CSS Selector from Apply Animation On.
  4. In CSS Selector, insert Heading CSS Class (.elementor-heading-title).
  5. Set the color. The animation should end once the element`s color has this color value.
Apply Elementor Color Effect with Custom CSS Selector for Multiple Elements
Apply Color Change Scroll Effect on Custom CSS Select With Magic Scroll for Elementor
Elementor Color Effect with Custom CSS Selector for Multiple Elements

An Example of Applying Elementor Color Animation Effect to an Elementor Element

In this example, we are going to apply the color change effect on Elementor Dual Heading widget. 

  1. Enable Magic Scroll feature to the Elementor Dual Header widget. Check this article to know more about how to do that.
  2. Add color animation effect to the Elementor element.
  3. Select Custom CSS Selector from Apply Animation On option.
  4. In CSS Selector field, we will use the CSS class given to the second heading (.premium-dual-header-second-header).
  5. Set the color you want.
Apply Elementor Color Effect with Custom CSS Selector for Single Element
Use Magic Scroll Elementor Addon to Create Color Change Scroll Effect
Change Element Color on Scroll Using Magic Scroll Elementor Addon

Elementor Magic Scroll Addon General Settings

  • How This Animation Should Work?: We used “Lock Page Scroll Until Animation Ends” because we want the text color to be changed before jumping next Elementor section. Click here to get to know more about the other options listed under “How This Animation Should Work?” and how they actually work.
  • Animation Order: Set the order of the animation of the current Elementor element. The animations with Animation Order set to 1 start first, then animations with Order 2 and so on.
  • Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “1”.

How to Get Element CSS Selector Using Browser Dev Tools?

  1. Locate the Elementor element CSS Class on your page by right-clicking anywhere on your page, then click on “inspect” from Drop Down menu.
  2. Then, select the element from HTML.
  3. Copy the element CSS so you can insert it in the CSS Selector option.
Get Elementor Element CSS Selector for Premium Magic Scroll Elementor Addon

Related Docs:

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.