looping over code to produce multiple timelines.

[CICStoke]

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

 

 

[Carl]

Sorry, I'm not much of a ScrollMagic expert. But I believe this video from Petr Tichy will show how to use a loop to generate animations for multiple scenes:

 

 

[PointC]

Here's a basic each() loop to create multiple scenes.

 

See the Pen evqNEP by PointC (@PointC) on CodePen

 

Happy tweening.

[CICStoke]

20 hours ago, PointC said:

Here's a basic each() loop to create multiple scenes.

 

See the Pen evqNEP by PointC (@PointC) on CodePen

 

Happy tweening.

 

 

Hi PointC (Craig), I've modified the code similar to the one on code pen :

if (window.matchMedia("(min-width: 767px)").matches) {
		
		var ctrl = new ScrollMagic.Controller({
			globalSceneOptions:{
				triggerHook: 0.75,
				addIndicators:true
			}
		});
		
		var $elements = $('.bcg-parallax');
		
		$(".bcg-parallax").each(function(i){
			
			var element = $elements[i];
			
			var tl = new TimelineMax();	
			
			tl.from(element + " .content-parallax", 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4)
			  .from(element + " .bcg", 1.8, {y:'-20%', ease:Power0.easeNone},0)

			new ScrollMagic.Scene({
					triggerElement: this,
					triggerHook: 0.75,
					duration: '50%'
				})
				.setTween(tl)
				.addTo(ctrl)
			});
		
		}	

 

However this throws an error in the console:

 

Uncaught Error: Syntax error, unrecognized expression: [object HTMLDivElement] .content-parallax
    at Function.Sizzle.error (jquery.js:1473)
    at Sizzle.tokenize (jquery.js:2087)
    at Sizzle.select (jquery.js:2488)
    at Function.Sizzle [as find] (jquery.js:879)
    at jQuery.fn.init.find (jquery.js:2704)
    at jQuery.fn.init (jquery.js:2821)
    at Function.jQuery [as selector] (jquery.js:73)
    at new <anonymous> (TweenMax.min.js:16)
    at Function.D.from (TweenMax.min.js:17)
    at s.d.from (TweenMax.min.js:14)

 

I'm guessing that your code works and mine doesn't because the splittext function parses are jQuery object into something more palatable for TimelineMax to use.

 

Any idea how to parse a simple jquery selection to work in a timeline?

 

Thanks

 

Dan

 

 

[PointC]

Nothing is immediately jumping out at me, but If you could put that into a CodePen demo, I'll take a look for you.

 

Happy tweening.

[OSUblake]

If you're using jQuery, so will GSAP. The problem is you're adding a string to an element. You need to select the elements.

 

// Nope
element + " .content-parallax"

// Works
$(".content-parallax", element)

// Also works
element.querySelectorAll(".content-parallax")

 

You also don't need to create the $elements object as the element is passed into the function, and is also the context, ie. what 'this' refers to. 

 

//var $elements = $('.bcg-parallax');
		
$(".bcg-parallax").each(function(i, element){
			
  //var element = $elements[i];
			
  ...
});

 

[CICStoke]

Thanks Blake, this worked great