How do I get everything else to clear the animation?

[PaulAG]

My animation works fine, but the last element whilst displaying fine actually positions itself over the top of the following content so you can't click on any of the links in that content. I've tried different settings for the pushFollowers but it just creates a massive space at the bottom of the animation. Here's my code:

 

var e = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onEnter" } }),
				
			t = { t1: new ScrollMagic.Scene({ triggerElement: "#t1"}).addTo(e).triggerHook("onEnter").addIndicators() };
			
            t.t2 = new ScrollMagic.Scene({ triggerElement: "#t2", duration: "100%" }).setPin("#t1", { pushFollowers: !1 }).addTo(e).addIndicators(), 
				
			new ScrollMagic.Scene({ triggerElement: "#t2", duration: "100%" }).setTween(TweenMax.fromTo(".c2", 1, { y: "100%" }, { y: "0%" })).setPin("#t2", { pushFollowers: !1 }).addTo(e).addIndicators(),
				
			t.t3 = new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%"}).setPin("#t2", { pushFollowers: !1 }).addTo(e).addIndicators(),
				
			new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%" }).setTween(TweenMax.fromTo(".c3", 1, { y: "100%" }, { y: "0%" })).setPin("#t3", { pushFollowers: !1 }).addTo(e).addIndicators(),
				
			t.t4 = new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%"}).setPin("#t1", { pushFollowers: !1 }).addTo(e).addIndicators()

 

[Carl]

Sorry, but we really can't look at a bunch of JS code in isolation and imagine what is happening in this type of scenario.

There could be any number of factors (most likely related to your css and layout) that are causing this.

 

I'm doubtful this is a GreenSock-related issue, but if you can create a reduced test case that only contains enough HTML / JS / CSS to replicate the problem we can take a peek at it and see if anything jumps out. It doesn't have to contain any of your production images or text, just a simple prototype.

 

 

thanks!

[PaulAG]

Thanks Carl, site is supposed to be going live Monday so I may as well post the dev link here as if we can't resolve it I'll have to come up with something else - https://www.awa-digital.com/-new?hs_preview=KFYYlCgO-5834186657 - Now I've changed the code so the pushFollowers on the last scene is set to true:

 

new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%" }).setTween(TweenMax.fromTo(".c3", 1, { y: "100%" }, { y: "0%" })).setPin("#t3", { pushFollowers: 1 }).addTo(e).addIndicators(),

 

So now you can click the links below the animation, but obviously I've got a big green slab underneath that it would be great not to have!

 

Many thanks

[PaulAG]

@Carl let me know if it would be more helpful to revert the code to the original issue.

 

Thank you

[PaulAG]

@Carl I've added in some additional indicator details to try and mark out what is where

 

var e = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onEnter" } }),
				
			t = { t1: new ScrollMagic.Scene({ triggerElement: "#t1"}).addTo(e).triggerHook("onEnter").addIndicators({ name:'t',indent:50 }) };
			
            t.t2 = new ScrollMagic.Scene({ triggerElement: "#t2", duration: "100%" }).setPin("#t1", { pushFollowers: !1 }).addTo(e).addIndicators({ name:'t.t2',indent:100 }), 
				
			new ScrollMagic.Scene({ triggerElement: "#t2", duration: "100%" }).setTween(TweenMax.fromTo(".c2", 1, { y: "100%" }, { y: "0%" })).setPin("#t2", { pushFollowers: !1 }).addTo(e).addIndicators({ name:'#t2',indent:150 }),
				
			t.t3 = new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%"}).setPin("#t2", { pushFollowers: !1 }).addTo(e).addIndicators({ name:'t.t3',indent:200 }),
				
			new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%" }).setTween(TweenMax.fromTo(".c3", 1, { y: "100%" }, { y: "0%" })).setPin("#t3", { pushFollowers: 1 }).addTo(e).addIndicators({ name:'#t3',indent:250 }),
				
			t.t4 = new ScrollMagic.Scene({ triggerElement: "#t3", duration: "100%"}).setPin("#t1", { pushFollowers: !1 }).addTo(e).addIndicators({ name:'t.t4',indent:300 })	

 

Seems weird that green block is beyond all of the triggers?

[Carl]

Sorry, I have no idea what I'm supposed to be looking at on your live site or what 90% of the code you have pasted is supposed to do. I don't use ScrollMagic enough to understand what pushFollowers and other properties mean.

 

But even the GSAP code leaves lots of questions:

 

TweenMax.fromTo(".c2", 1, { y: "100%" }, { y: "0%" }))

 

What is ".c2"? Am I supposed to search your html for something with that class and then look in your css to try to find that rule and then try to figure out what it is supposed to look like before, during and after it is done animating?

 

You also mention a big green slab. Does it have a class or ID? Where is it in your html? Where are you controlling it with javascript? What css properties are being applied to it?

 

See the dilemma?

 

Its just way too much for us to try to dig into, and then there are hundreds of lines of css and js that are on your full site that aren't even related to the question.

 

If you can't provide a clear and simple demo using an online editor like CodePen of JS Fiddle that clearly illustrates an issue you are having that is related to GSAP, I'm afraid I won't be able to help any further with this.

 

 

[PaulAG]

@Carl Sorry I know it's a bit of a complicated example to work with! I'll try and explain it a bit more clearly.

 

So the .cX classes, .c1, .c2 and .c3 are the slides within the pin spacer divs, which are marked with corresponding #tX ids of #t1, #t2 and #t3. So sliding down the page the left hand side of the big green banner appears to fix, whilst the right hand side scrolls up with the 3 boxes of text before moving on to the rest of the content.

 

The big green slab appears at the bottom the slides and is caused by #t3 being outside the whole of the slider, #t1 and #t2 seem to remain within the container. The pushFollowers setting appears to basically clearfix the slide. Without it I get no big green slab but the element is still sitting over the top of the elements underneath so you can't click on the links in them. It might be the case my approach is wrong in trying to fix it with the code and I should try and look at the z-index of the elements to put the following content 'above' the slider so that when they appear on screen, the links are clickable.

 

I'll do some more experimenting! Thanks for looking at this.

[PaulAG]

Ok so quick update, it would appear that setting "pointer-events:none" on the main slide and then "pointer-events:auto" on the bit of the slide with links, allows you to click on the links below. I did see this earlier on stack overflow, but Chrome didn't seem to like it but now does bizarrely.

 

Feels a bit hacky really, if anyone can unravel what I'm doing wrong with the animation setup for a better fix that would be great.

 

Thanks