Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Tonycre8's Achievements



  1. 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!
  2. 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
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. It is what it is. Every learning process has it's weird little notches!
  8. Well don't I just feel a little stupid? Thanks a lot! Really appreciate it!
  9. 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.
  10. 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
  11. 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?
  12. 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
  13. 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
  14. 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.