Tonycre8

Thanks a lot with this Cassie! My brain was not working today. Managed to get that done quite quickly though. Going to have to poke around with it to tune the animation but it definitely works better! Thanks again

Hey there. As you can tell by the title, I'm struggling to put my issue into works. I've got this panels expanding animation that allows me to open and close panels, and it toggles the panels. Yada yada. I've got a bit of a bug where, if you click too quickly, the text gets stuck as shown in this screenshot here. This happens when you open a panel and then close it quickly. The text becomes visible but then it never gets to animate back to being invisible. I'm not new to gsap, just having a hard time wrapping my head around this little issue. Thanks a lot in advance!

Thanks a tonne for this! Guess I wasn't Google searching hard enough. This seems to fix the issue. Although, it does seem to continue to offset the character, but I'm unsure that there's much I can really do about that, so it's going to have to do. Cheers!

Hey forum. I've come across a little issue with my work on a mobile view, and I'm not sure how to go about dealing with it. Basically, I've got my home page animated with gsap, as well as a character that is animated within it's own component. When I try to focus on any of the areas on the contact form, it'll push the page up for the keyboard to have some room, and then it'll reset. You can see the effects in this video I recorded of the page on my phone. I've tried to make a sandbox replicating the code I have, which I'll link here as well. https://codesandbox.io/s/react-router-re-render-8btmz This piece has the same issue, it's just a simplified form of it. I just edited some old code that had scrolltrigger already set up. Any ways you think I can get rid of this issue in particular? Thanks

That would explain it, thanks a lot!

Good afternoon. I've got a bit of an issue I'm unsure of how to solve. I've got some code, and have put some styling onto my nav button by use of tailwind classes, and so my nav button looks like this: <div onClick={menuToggle} ref={el => {navIcon = el}} className="text-gray-800 z-50 fixed top-4 right-4 text-4xl cursor-pointer"> <Button /> </div> When I activate this , it'll pull out a nav menu, and because of the contrast I have tried to get it to also swap out the color of the text, so that the nav becomes white, like so: gsap.to(navIcon, {delay: .2, className: '+=text-white'}) however, when doing this, the div is changed in it's classes to this: <div onClick={menuToggle} ref={el => {navIcon = el}} className="text-white"> <Button /> </div> Why does adding the text-white simply remove all of the other classes? Not sure how to get it working where I can just add the class, rather than replacing all of the classes on the element.

We seemed to have found a fix! Well, my brother worked on it whilst I was waiting for someone to turn up for a meeting. Based on a comment from here: We found that the issue is actually just adding a surrounding div to my home.js code, so something like this: return ( <div> <div className="sections"> <section className="section" style={{ background: "white" }}> <div> <Link to="/blog">Link</Link> </div> </section> <section className="section" id="section2" style={{ background: "green" }} > <p>Section 2</p> </section> <section className="section" id="section3" style={{ background: "blue" }} > <p>Section 3</p> </section> <section className="section" id="section4" style={{ background: "orange" }} > <p>Section 4</p> </section> <section className="section" id="section5" style={{ background: "yellow" }} > <p>Section 5</p> </section> </div> </div> ); Although we are still unsure of why this works, it seems to be a working solution.

Hey there. Thanks for the response. I'll come back to updating the syntax in a short while, but about the potential solution. What would the ID be? I've tried using this as well as the other bits of cleanup I've done. ScrollTrigger.kill() in my code since then, but it hasn't seemed to work either.

Hello GSAP gang, I have a little bit of a situation going on. I understand that there's already a post on this topic, but I need help with this one as well. I've got some code that I have tried out but it seems that I've been unable to fix this issue. The coding sandbox comes up with an error: "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." https://codesandbox.io/s/react-router-re-render-8btmz?file=/src/index.js I was wondering if any of you guys had any experience in this, and how to get it so that the React router link works as intended? Thanks

It is what it is. Every learning process has it's weird little notches!

Well don't I just feel a little stupid? Thanks a lot! Really appreciate it!

Good afternoon guys. I've been on this little issue of mine for about 3+ weeks now, and I'm getting a little sick of it. Basically, I'm trying to work out how to get GSAP to play nicely with ThreeJS so that I can interact with HTML elements instead of just being greeted with the canvas. Initially you may be thinking that this is a ThreeJS problem rather than a GSAP problem, but I've already ruled that out given that ThreeJS only creates a Canvas. And I've managed to create solutions that alienate that as an issue. I can't interact with any HTML elements as you can see my furiously try to click on elements in this video. I have managed to cheat the system a little, but it was only a temporary solution. Instead of changing the backgrounds of my slides, I would instead change the background of the parent element. <div class="parent"> <div class="car"></div> <section class="child slide1"></section> <section class="child slide2"></section> </div> This worked for about three slides, until the rest of the slides failed to follow the tag rules that I had set on a ref created for the parent element. And when I say it worked for three slides, I mean it didn't. In this image, you can see that the content of the previous slide hasn't completely disappeared. I added tags and applied them like so to the scrolling animations. It's pinned when the actual animation hasn't been completed. Even though the start times and such lend itself to completing the animation before it pins. The background hasn't fully set itself to the "#fff" colour. let slide_anim = new gsap.timeline({ duration: 1, scrollTrigger: { trigger: "#slide2", endTrigger: "#slide5", start: "top top", end: "+=5000", scrub: 1, markers: true } }) slide_anim .add("slide1", 0) .add("slide2", 10) .add("slide3", 20) .add("slide4", 30) .add("slide5", 40) // Slide 2 slide_anim.to(container, {background: "#363636", scrollTrigger: { trigger: "#slide2", start: "+=1000", scrub: 1, }}, "slide2") // Slide 3 slide_anim.to(container, {background: "#ffffff", scrollTrigger: { trigger: "#slide3", start: "+=1000", scrub: 1, }}, "slide3") I would prefer to have this work where the slides have their own individual colours, and I wouldn't have to manage it through the parent container and it's properties. But one of two things can happen if I try to use the alternative slide method - all to do with layers. 1. The car stays on top of the slides, but none of the html content is accessible because it is behind the car canvas. 2. The html content is accessible, but after you scroll to the first slide, the car disappears behind the rest of the slide in content. I did attach a codepen. But unfortunately I can't get that to work at all. I don't know why it's coming up blank and I don't have the energy to fix it at this point. I can drop a github repo to clone if that would be more helpful. Thanks for your time if you do drop by this thread.

Okay I finally got it! I'll drop a video here to just to show you guys. Just had to tweet how I was doing things, and adding labels too to keep the timeline going. Here's a snippet of what's changed: let car_anim = gsap.timeline({ duration: 1, scrollTrigger: { trigger: "#slide2", endTrigger: "#slide4", start: "top top", end: "+=3000", scrub: 1, markers: true } }) ScrollTrigger.defaults({ immediateRender: false, ease: Power1.inOut }) // Slide 2 car_anim .add("slide2", 0) .add("slide3", 10) .add("slide4", 20) car_anim .to(scene.rotation, {y: -1.55, duration: 4}, "slide2") .to(camera.position, {x: -0.1, duration: 4}, "slide2") // Slide 3 .to(scene.rotation, {z: 1.6, duration: 4}, "slide3") // Slide 4 .to(camera.position, {x: -.15, z: 4.2, duration: 4}, "slide4") .to(scene.rotation, {z: .035, y: -3.15, duration: 4}, "slide4") And then here's the video: Thanks a lot you guys for the help! -Tony

Okay so with that example then, how would I get it to properly stagger between slides? I can't get the start times to quite align. For example, I've copied a bit of what akapowl has and tried messing with it, but the animations trigger too quickly. Where I want one option to be tweened later on, it tweens it straight away. As an example in this image, the car should only be rotated fully like this when the pink is fully visible. I.e. and entire slide covers the view. But it's already at this point by the time I get to the second slide. Which is odd, considering I told it to **start** at the second slide, but it's now ending it's animation on there. Here's a quick snippet: let car_anim = gsap.timeline({ scrollTrigger: { trigger: "#slide2", endTrigger: "#slide5", start: "top top", end: "+=1000", scrub: 1 } }) ScrollTrigger.defaults({ immediateRender: false, ease: Power1.inOut }) car_anim // Slide 2 .to(scene.rotation, {y: -1.6}, 0) .to(camera.position, {x: -0.1}, 0) // Slide 3 .to(scene.rotation, {z: 1.6}) // This happens too quickly! Any advice on how to get that to work? So that it only triggers when it hits the next slide?

I was going to say, I was just experiencing a little issue with the scrolling where the object has some trouble flicking about a bit haha Not so sure how to implement buffer-zones though. Would these be like, additional divs to end on? I'm a bit new haha