mrcl

Jack, thanks again for taking the time and explaining everything in detail. It helped a lot. Now I also know how to handle the "kill()" situation properly which was another problem I was aware of but didn't want to overcrowd my post with too many issues. Cheers!

thank you Jack, that was what I was trying to do. If you have time I would be glad if you could give a short explanation why "currentAnimation" was necessary and what my mistake was setting this whole thing up? thanks again for the fast reply and help!

Hi everybody, I'm using matchMedia to control the width of an off-canvas menu which in itself works fine. But I realized that once the menu was toggled it automatically opens when resizing the screen. I don't get what I did wrong so I was hoping someone can point me in the right direction. Thanks in advance!

Thank you so much for pointing it out @OSUblake It's always the little things

Hi, I can't figure out a problem I have using SplitText with ScrollTrigger. When scrolling down everything animates as planned and the text slides in smoothly but on re-entering the text disappears for a second to then being animated in reverse. It only seems to affect the text and since I do a double split I was wondering if this might be the reason and if there's a workaround. I wanted to emulate the problem best I can I tried to stick to the original dimensions of my project. Best is to open the codepen in a new window. Thanks in advance! Marcel

@akapowlthat is exacly what I meant and what my problem was. Awesome! Thanks a lot, guys for taking the time to answer and explain.

Ok that makes sense , but I'm still in deep waters with the endTrigger element. I recreated the problem I'm facing in my pen here : https://codepen.io/mrclstrtr/pen/gOXNmNw I thought that how it works is that the hero unpins slightly above the last sections center like with the rest of the animations happening above the headlines. But it gets stuck at the end of the third section and I can't wrap my head around why. Here's the scrollTrigger I use for the hero ScrollTrigger.create({ trigger:"#hero", start:"center center", endTrigger:".section-4", end: "center +=150", scrub: true, pin: true }) And here's what slightly happens it all of the sections const tlSection_2 = gsap.timeline({ scrollTrigger: { trigger: ".section-2", start: "top +=150", end: "+=1000", pin:true, scrub:true } }) .to(hero, { scale:.5 }) .to(hero, { scale:1 }); I've chosen such a big end value to time stretch the animation. Should I better work with an empty tween to achieve this and is this causing the hero not to end up correctly at the destination?

Thanks for all the advice so far. It helped a lot. Is the position of the endTrigger element recalculated by default on a window resize or do I have to add a listener function somewhere? And do end values matter when using an endTrigger element?

It's coming closer to what I have in mind thanks to your advice. Awesome! I still have one major problem which is how I calculate the distance to end/unpin the hero when arriving in Section 3. ScrollTrigger.create({ trigger:"#hero", start:"center center", end:"+=3500", scrub: true, pin: true }) For now I'm faking the arrival with a double so to say, but it looks a little jumpy. Is there a best practice approach for a situation like this? Cheers!

Hi everybody, I currently working on a landing page where a "hero" is traveling down the page and I thought I had figured it out conceptually but I've ran into some problems. The Pen shows the rough idea of what I try to accomplish and I hope someone can push me in the right direction. + The first problem I encountered was that the "hero" is not scrolling in the viewport center all the time. + The second is that the "hero" should stop moving when he arrives at his destination in section 3. + And in section 1 where it turns blue as an example of something happening I want to pin the section and animate the "hero" (dividing himself into two pieces and moving left and right, but that doesn't matter really ) After scrolling x amount the animation is reversing and the journey continues. My main question is if I'm thinking it all wrong and the "hero" is in a fixed position and everything else is moving and I pin the section when needed when I scroll them into view? Or do I have to control different timelines at once? Like I said I'm glad for any hint or codepen example that removes the plank sticking to my forehead Cheers!