Hi,
First of all may I thank you for all of your help with previous issues that I have had … anyway another day, another issue …
I am trying to get a code pen to work using ‘scrollmagic’ horizontal animated text on scroll codepen to work but don’t think that I have it set up just right.
After a searching on here and also a lot of research elsewhere I have added the following to my functions.php file in my childtheme as it uses external js from a CDN:
add_action( ‘wp_enqueue_scripts’, ‘load_scripts’ );
function load_scripts() {
wp_enqueue_script( ‘dbug’, ‘https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js’, array(), ‘1.0.0’, true );
wp_enqueue_script( ‘scrollmagic’, ‘https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js’, array(), ‘1.0.0’, true );
wp_enqueue_script( ‘tweenmax’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js’, array(), ‘1.0.0’, true );
}
I have the following JS set up on the page itself:
var scrollContainer = document.querySelector(".scroll-row");
var rows = [].slice.call(document.querySelectorAll(".text"));
var scrollController = new ScrollMagic.Controller({
container: scrollContainer
});
var scene = new ScrollMagic.Scene({
duration: scrollContainer.getBoundingClientRect().height,
triggerHook: 0
})
.on(“progress”, function (e) {
TweenMax.to(rows[0], 0.7, {
x: -e.progress * 100
});
TweenMax.to(rows[1], 0.7, {
x: e.progress * 100
});
TweenMax.to(rows[2], 0.7, {
x: -e.progress * 100
});
})
.addTo(scrollController);
I have attempted to add this to the js:
jQuery(document).ready(function($){
/YOUR CUSTOM SCRIPT HERE/
});
And also gave this a try:
(function($){
/YOUR CUSTOM SCRIPT HERE/
})(jQuery);
And the following CSS on a section:
.scroll-row {
height: 100vh;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
With the correct class applied.
And the following CSS on the text itself:
.text {
display: inline-block;
white-space: nowrap;
&:nth-child(2) {
}
}
With the correct class applied.
I am out of ideas and thought that I would ask whether you had any ideas on why it is not working for me?
The codepen can be found here:
Thanks in advance!