ScrollReveal deletes my dynamic jQuery.css() changes

[tarek1500]

OS: Windows 10 ScrollReview version: 3.3.4 Browser: Chrome Version 58.0.3029.110 (64-bit)

I was trying to make a dynamic CSS change (live preview) using jQuery and add some animation using ScrollReveal. But once I change the font size using the textbox, then scroll down and up, the ScrollReveal delete my dynamic CSS changes. It do all the stuffs fine but it deletes my new font size and back to initial size. Here is my code:

<div class="form-group">
    <label class="col-xs-2 control-label">Font size</label>
    <div class="col-xs-10">
        <input type="text" name="fontsize" placeholder="e.g. 10px, 10em, ..." class="form-control">
    </div>
</div>
.
.
.
<div class="preview">
    <div class="header" style="height: 200px;"></div>
    <div class="section" style="min-height: 400px;">
        <div class="title" style="padding-top: 20px; padding-bottom: 10px;"></div>
    </div>
    <div class="footer" style="height: 200px;"></div>
</div>

$(function () {
    window.sr = ScrollReveal({
        duration: 1000,
        delay: 250,
        easing: 'ease',
        container: $('.preview')[0],
        reset: true,
        useDelay: 'once'
    });
    sr.reveal('.preview .section .title', {
        origin: 'top',
        distance: '200px'
        scale: 0.1
        viewFactor: 0.8
    });

    $('input[name="fontsize"]').on("paste keyup", function (e) {
        $('.preview .section .title').css({ 'font-size': $(this).val() });
    });
});

It is supposed to work like that? or I'm doing something wrong?

[jlmakes]

ScrollReveal generates CSS which it uses by applying it to an HTML element’s style attribute. Before it does this though, it stores the existing style attribute (one during the reveal() call), which preserves existing inline styles.

The $().css() method is also applying CSS via the style attribute, but like you have noticed, it just gets overwritten with what ScrollReveal has stored because you are changing this dynamically (after ScrollReveal has scanned the element).

I think the simplest solution here is to use ScrollReveal on a parent element instead, (such as .section) to avoid style attribute conflicts.

Note: Also, please be sure to update to 3.3.6 for an important bug fix.

[tarek1500]

Thank you for your comment. I tried your solution and it is working fine. Since I have many divs inside the .section div I wrap each one with div element and apply the ScrollReveal to this div.