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

This works like a charm! Thanks a lot you guys! I'll definetely have a look at making my code a little cleaner too haha. Thanks a lot to the lot of you champs. Also, quick shoutout to @akapowl for making a CodePen because I was too lazy too :'> Appreciate it

Hey guys, I'm having some trouble on something this evening, was wondering if you guys could help. Given that this uses a 3d model, I can't attach a codepen unfortunately. But I'll do the best to include all relevant code snippets and give all the details I can. I've been working on a website that uses scroll trigger to move content around, and also to move around this 3D car model that I have. I have 4 different slides, and for the sake of simplicity, I've gone ahead and recoloured them. Slide 1: Blue, start slide Slide 2: Pink, slides in from the right Slide 3: Yellow, slides in from bottom Slide 4: Green, slides in from the right Now Slide 4 is the main culprit, I'm trying to move this car around to have the car in the 4th slide look like the image below: However, the transition to the image is a little less than sleek. I've attached a video of how the transitions currently look, scrolling between these different slides. Ignore the music, I just recorded this very quickly on my ShadowPlay. Now let's talk about the code I've got. I'm trying to use ScrollTrigger to move between all of these, and I created a variable for a timeline just so I could keep it all in check (or so I thought). Here's what I have thusfar. scene.rotation.set(0, 9.8, 0) camera.position.set(-1.2,0,5) let car_anim = gsap.timeline() // Slide 2 car_anim.to(scene.rotation, {y: 4.79, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide2", scrub: 1, }}, 0) car_anim.to(camera.position, {x: -0.1, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide2", scrub: 1, start: "right right" }}, 0) // Slide 3 car_anim.to(scene.rotation, {z: 1.6, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide3", scrub: 1, start: "top top" }}, 0) // Slide 4 - The problem child car_anim.to(scene.rotation, {z: 0.02, y: 3.1, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide4", scrub: 1, start: "right+=2500 right" }}, 0) car_anim.to(camera.position, {x: 0.16, easing: Power1.easeInOut, scrollTrigger: { trigger: "#slide4", scrub: 1, start: "right+=2500 right" }}) I start out with setting a base camera position and scene position. The scene position refers to the car, and the camera just refers to the camera. The first three slides work well. I have another video somewhere of all of those working just fine. I'm just having trouble of smoothly continuing the movements of the car. It's not a ThreeJS issue I don't think. I'm pretty sure it's just the start of the scroll trigger, given that the other ones have worked fine. I guess it's as I've started making more complex movements. So yeah, how do you think I could get these working at all? I'm not entirely sure what I'm doing wrong to be very honest with you. Thanks in advance, and sorry for the lack of codepen - it's a little hard to do with all the technical set up. UPDATE: Just an edit after I've played around with it a bit more. I think it's becoming less and less of a gsap issue, but I'll keep this thread up in case anyone else knows how to solve it / it can be used as a future reference. It seems as if when I modify a different axis more than once (i.e. the y-axis), it updates the value weirdly. I don't have console log proof, but I messed around with the 4th slide and it seems to transition fine when I set it to affect the x-axis - a property that has yet to be used with the scene rotation.

Yes! Exactly solves my issue, thanks a lot!

Hey guys, I'm having a little trouble with something. I'm trying to work out how to get ScrollTrigger to animate content when the slide is fully on screen. In the codepen I've added, there are animated panels on the second slide. However, they animate before you even get onto that slide. Is there any way to delay the animation until the user has gotten fully onto that slide? Thanks a lot,

Well, I logged on this afternoon to see if I could replicate the issue. I ended up fixing it. I'm not exactly sure how but now everything seems to work. I think this might also be because when I installed gsap via npm, it initially gave me version 3.3.4 instead of 3.4.0? Who knows. Anyways, thanks a lot for your support nonetheless!

Turns out I did need the -1 afterall! It's something to do with calculating where to end the panels. I tried to get the pen to recreate the issue, but when I put my code in everything was valid lol. So I'm not sure. I did eventually, manage to get it to work. But it involved some incredibly unhealthy practices, such as putting a body tag, inside of a body tag, embedded by other divs. Embedded within my current learning project for this, I have changed my code slightly to bend to the demands of ScrollTrigger. In my page.js for example, which is a template for my project (header and nav functionality), I have this: return ( <> <div className="loader" ref={el => {loader = el}}> <div className="loader-content" ref={el => {loadContent = el}}> <img src={Logo}></img> <h2>Welcome</h2> </div> </div> <div className="page" ref={el => {app = el}}> <div className="header"> <img className="logo" src={Logo}></img> <Nav /> </div> <body> {children} </body> </div> </> ) Obviously there shouldn't be a body tag within a body, but if I didn't do that then the "width: 100%" for each of the panels wouldn't match, and setting them to "width: 100vw" wouldn't work either. It has to be within a body tag I found. It still wouldn't fix the height issue of each element though, which was particularly strange. But I just strapped a "height: 100vh" to get it to shut up. It works up to scratch. But I don't think this should be the way things are done. It's a little strange putting a body inside a body lol, but maybe that's just me. Here's a video that demonstrates the now working code: https://www.loom.com/share/f200ff11c1f74e2281d1ca4260a8a65f

Hi guys, having a little bit of trouble here with ScrollTrigger I'm trying to learn it's usage by following the tutorial for horizontal snapping sections found in the docs. Mine won't work for some reason however. I'm not sure what I'm doing wrong. I've tried to get gsap to register the ScrollTrigger plugin, and my animation is practically the same as theirs (minus the sections.length - 1 because I don't have that extra panel in the beginning. I'm not sure exactly what's going on. It's also of note that I'm trying to add this content in the midst of content already on my page. Any help would be appreciated. https://codepen.io/tonycre8/pen/bGEMyvx Edit: Please refresh, I've been working on just getting the codepen to render properly as a React component. Edit 2: It seems as if this code works on the code pen. But it will not work in actual code?? I'm not sure what's going on there. Here's a video of my code not working in an actual project. The code is identical to the one demonstrated in the codepen. CSS and everything. https://www.loom.com/share/bf002f5668034e418c9486204dbd8426

Ah okay. Yeah I've added registry for the plugins now in my useEffect statement, just to make sure that's all installed for later. useEffect(() => { if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } // ... So if I was to just make a full page, would it be a good idea to store everything in the useEffect statement? I'm not entirely sure on using flags, as I just want to animate a single page, there's no way I'd trigger them unless I added an intersection observer or something like that. It seems like I'm overloading the useEffect, but at the same token I'm not sure what the point is adding flags and how I would trigger them.

Hey there, I haven't no, but panels isn't actually an array here. I managed to get it working funnily enough, but not in the way I was trying to. I had to simplify by adding the scrollTrigger property onto a gsap animation, i.e. gsap.to([panel1, panel2, panel3], { duration: 1, opacity: 1, stagger: { each: .6 }, scrollTrigger: { trigger: panels, } }) And also, it seems as if in React, gsap animations don't work too well outside of the useEffect or triggers like an onClick. You can't just put it as a part of the function code it seems.

Hey guys, I'm trying to use GSAP along with ReactJS, and trying to get scroll trigger to work. I have some code here: import React, {useRef, useEffect} from 'react'; import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' export default function App() { //... let panels = useRef(null) var anim = gsap.to(panels, { y: 300, duration: 2 }) ScrollTrigger.create({ trigger: panels, animation: anim, start: "top center", end: "top 100px" }) } But I seem to constantly get errors. In fact, any time I don't put an animation in my useEffect() statement, it breaks my code completely. The error I'm getting is as follows: Does anyone know what I can do to fix this? And is there any way to get animations to work outside of the useEffect component?