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

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

@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 let me know if it would be more helpful to revert the code to the original issue. Thank you

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

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

Thanks for everyone's help, I managed to cobble a working solution together, turns out my less compiler didn't like the top:-100vh setting and was changing it to top:-100 vh which Chrome didn't like.