Jump to content
GreenSock

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

Function specific child selectors not working as triggerElement in ScrollMagic / GSAP TimeLineMax

Recommended Posts

Im attempting to build a 2 Scene  ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break.

 

---

The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function:


But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all:
 

$('.text-fade-in > ul').each(function(){
    var thisSelector = this;
    var thisLi = $('li', this);
    var thisLiHeight = thisLi.height();

    var fade_in = new TimelineMax();
            fade_in.delay(.45);
            fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15);

    var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'})
            .addIndicators({name:"li_fade"})
            .setTween(fade_in)
            .addTo(controller);

    var fade_out = new TimelineMax();
            fade_out.to(thisLi, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0);

    var scene_out = new ScrollMagic.Scene({triggerElement: thisLi, triggerHook: 'onLeave', duration: thisLiHeight})
            .addIndicators({name:"li_fade_out"})
            .setTween(fade_out)
            .addTo(controller);

    });

 

See the Pen ZrjGVv by anothercreativeltd (@anothercreativeltd) on CodePen

Link to comment
Share on other sites

I found part of the solution.

I was trying to call multiple triggerElement's by just using a single selector. I had to nest another .each() function for each of the <li> within the original elements function.

 

The issue now is that those <li>'s are being called from the entire site, instead of just the ones nested in the original function.

 

('.text-fade-in > ul').each(function(){
	var thisSelector = this;
  	var thisLi = $('li', this);

	var fade_in = new TimelineMax();
		fade_in.delay(.45);
		fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15);

	var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'})
		.addIndicators({name:"li_fade"})
		.setTween(fade_in)
		.addTo(controller);

		$('li').each(function(){
			var thisSelector = this;

			var fade_out = new TimelineMax();
  				fade_out.to(this, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0);

			var scene_out = new ScrollMagic.Scene({triggerElement: this, triggerHook: 'onLeave', duration: 10})
				.addIndicators({name:"li_fade_out"})
				.setTween(fade_out)
				.addTo(controller);
		});

});

 

Link to comment
Share on other sites

Hi @andrewnelson :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I'm not 100% clear on what you're trying to accomplish here. There are several scripts missing from your demo (ScrollMagic, ScrollMagic Indicators & the GSAP plugin for ScrollMagic). You'll also need to define a controller so the scenes can be added to it.

 

Here's a fork of your demo with those changes. I just set some other properties so you can see what's happening. It's always easier to debug ScrollMagic using the indicators so I've turned those on as well.

 

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

 

You are running an each() loop on the <ul>, but you only have one <ul> and then another each() on the <li> tags so I'm a bit confused. What exactly should be happening? It looks to me like you want to stagger each <li> into view as soon as the <ul> enters the screen and then fade the entire <ul> when it hits the top. Is that accurate? 

 

You can fork my demo and make more changes, but some more info about the desired outcome would be most helpful in getting better answers for you. 

 

Happy tweening and welcome aboard.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hello @PointC thanks for the warm welcome!

I appreciate you going through the CodePen and sorting out the missing scripts! I haven't used much of CodePen before so this will be incredibly helpful moving forward.

As for the purpose of the code:

  • There are multiple <ul> on the page, so calling the TimelineMax for each one.
  • onEnter, the triggerElement will be the <ul> and then the <li> will stagger in.
  • onLeave, each individual <li> will have an individual triggerElement and the <li> will fade out to 'opacity: 0' over a duration of 15px

I apologize for the lack of clarity in my explanations and my code, this is all still quite new to me.

Thanks again!

 

 

 

  • Like 1
Link to comment
Share on other sites

I forked and updated your CodePen with the changes I started to make earlier.

 

It appears to be working as intended but is hard for me to tell because there are no other potentially conflicting elements on the page.

 


See the Pen ZrjLPP?editors=1010 by anothercreativeltd (@anothercreativeltd) on CodePen

 

 

Edited by andrewnelson
trying to insert the codepen directly into the post instead of a link
Link to comment
Share on other sites

I see - each of the <li> elements is its own trigger on the way out. That's the part I was misunderstanding on the first demo.

 

It looks like you have it working now, but if you have more questions or problems when you add new elements, please post an updated demo and we'll do our best to help. 

 

Happy tweening.

:)

 

  • Like 1
Link to comment
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.
×