Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

looping over code to produce multiple timelines.

Recommended Posts

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%'



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.





Link to post
Share on other sites

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:



  • Like 1
Link to post
Share on other sites
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({
				triggerHook: 0.75,
		var $elements = $('.bcg-parallax');
			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%'


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?







Link to post
Share on other sites

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.


  • Like 1
Link to post
Share on other sites

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


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];


  • Like 4
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.