Hi I'm trying to work out why this code isn't working.
I would like to scan the document to find every instance of and element with a class of bcg-parallax and then run the code below:
if (window.matchMedia("(min-width: 767px)").matches) {
var controller = new ScrollMagic.Controller();
$(".bcg-parallax").each(function(i, item){
var newIndex = i + 1;
var itemRef = '.bcg-parallax:nth-of-type(' + newIndex + ')';
var parallaxTL = new TimelineMax();
parallaxTL.from(itemRef + '.bcg-parallax .content-parallax', 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4)
.from(itemRef + ' .bcg', 1.8, {y:'-50%', ease:Power0.easeNone},0);
new ScrollMagic.Scene({
triggerElement: item,
triggerHook: 1,
duration: '100%'
})
.setTween(parallaxTL)
.addIndicators()
.addTo(controller)
});
}
I'm using the css rules plugin, but this code at this time is hiding the first instance of the .content-parallax and thats it. It is not firing any events at the point of scroll.
Basically I want the animation to be relative to the elements position on the page.
Any ideas, I'm really struggling.
Thanks