Jump to content
GreenSock

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

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%'
				})
				.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

 

 

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({
			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

 

 

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
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];
			
  ...
});

 

  • 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.

×