maxcreative

Thank you for the response, Zach. I will try it out and attempt to make MVP CodePen with any further replies. Thanks.

Hello, First off, I have really enjoyed using ScrollTrigger. What an amazing tool! We are just putting the finishing touches on a months-long project that you can preview below. I plan on posting it into the "Showcase" section, once finished. Nearly all powered by GSAP!! ? My question relates to mobile browsers' lower Nav Bar. I know that I am making some type of mistake WRT how the height is being handled here. You'll see that on desktop, the first 1000px or so is fine. However on mobile, the main character shown in the example above (Emma), seems to "jump" down several hundred pixels after the first scroll has ended (and the mobile navigation bar collapses). I think that ScrollTrigger is re-firing immediately after that first interaction on mobile. Unfortunately, this code is so complex that I think providing a working CodePen is not viable. However I tried to isolate the relevant parts of the JS code, and paste below: let h = window.innerHeight; $(document).ready(function() { // GET EMMA AVATAR HEIGHT img1 = $('#p1-img1').height(); // ANIMATE EMMA'S INITIAL PEEK gsap.to("#p1-img1div", { y: cleanHeight, duration: .8, delay: 1.3, ease: "power2.out", }); }); // RISE UP EMMA AVATAR BASED ON SCROLL gsap.to("#movein-p1s1", { y: ((-h / 2) - (img1 / 4)), ease: "expo.in", scrollTrigger: { trigger: "#p1-sec1", start: "top bottom", end: "+=300", scrub: true, } }); Thanks!! Max

Thank you so much for your reply Zach, This turned out to be right on - we took your advice and stopped trying to do things dynamically, and it became much simpler to manage. Thank you! Looking forward to sharing more! Max

Hello GSAP community, I am so incredibly impressed with ScrollTrigger - love it! Imagine multiple ScrollTrigger-based stories (eg, three characters), that offer different versions of a story. Upon scrolling to the bottom of the first story, the user is able to view the other two stories. Currently, the HTML looks something like this: <section class="person" id="person1"> <!-- stuff --> </section> <section class="person height-0" id="person2"> <!-- stuff --> </section> <section class="person height-0" id="person3"> <!-- stuff --> </section> With .height-0 having tried many approaches, but currently reading: .height-0, .height-0 div { height: 0px; overflow: hidden; } (display: none seemed to really break things, FYI) I have created a JS file that is attempting to break apart the different steps I think need to happen in order to switch characters: $(document).ready(function() { // WHEN USER CLICKS ON PERSON 2 STORY ... $("#chip-a").click(function() { // SCROLL BACK TO THE TOP $('html, body').animate({ scrollTop: '0px' }, 0); // TURN OFF PERSON 1 $("#person1").toggleClass("height-0"); // TURN ON PERSON 2 $("#person2").toggleClass("height-0"); // ACTIVATE FIRST ANIMATION IN STORY 2 $("#p2-sec1").addClass("activate"); // FETCH JS FILE CONTAINING PERSON 2 SCROLLTRIGGERS window.setTimeout(function() { jQuery.getScript("js/person2.js", function(data, textStatus, jqxhr) { console.log(data); // Data returned console.log(textStatus); // Success console.log(jqxhr.status); // 200 console.log("Load was performed."); }); }, 5); }); }); With person2.js containing the same types of ScrollTrigger elements (pins, CSS classes, GSAP animations) as person1.js. However, ScrollTrigger does then not behave as expected: the pin method, for example, does fire, but doesn't actually append position:fixed to the targeted element. The other animations don't work either, doing strange things like moving 3.4px instead of 500px. I am hoping someone can offer some clever help here. There is obviously something I've overlooked, as ScrollTrigger is still working/firing in my second Story, but not actually affecting items on the page. Unfortunately, I can't upload to CodePen at this time. Thank you in advance! I really look forward to sharing the final product here when finished.