KinnuSingh

Hi! I apologize if this is more of a three.js project than a GSAP one, but I believe it’ll require both. I trust developers on GSAP, so I just wanted to post it here in case anyone could help with this. I am working on a personal website project and I was hoping to get a hero section designed using three.js/webGL. What I want is almost identical to what is designed on http://sakharov.space. I wanted to make a 3D model of a specific American football player, Tom Brady. Instead of being on stairs as in the Sakharov example, I wanted him standing at the end of a stadium tunnel. For the scrolling animation, I want the same thing that’s on the Sakharov site: scrolling triggers a zoom in on the model’s head and triggers an animation where the model turns around to face the camera/screen. I have a .obj file of the character’s head, but it is not textured. I also have a rigged and textured 3D model of a fictional football player, but the face, hair, jersey, and arm size would need to be changed. I can provide both of those models if they would make it easier to create the 3D model. I just need this hero section made instead of an entire website or page. I’d also appreciate it if it could be implemented on a WebFlow project. If possible, please provide me with a rough estimate of how much a project like this would cost. I’m on a bit of a tight budget but I’m somewhat flexible depending on the pricing. I’m also a bit flexible on the deadline but would prefer it to be done as soon as possible. Thank you!

Hi @Cassie! I did watch the full video you posted! I really appreciate the time you’re taking out of your day to help me, so I won’t just ignore any resource you point me towards. Correct me if I’m wrong, but wasn’t the first codepen example in my last post a non-scrubbed tween? Also, I think I was able to partially solve the blurry issue. I wanted to fix that first before setting any scroll positions. Just to give an example of how bad it is on mobile: As you can see, the image is clear when it hits scroller-end, but very blurry while scrubbing. will-change in CSS didn’t fix it for me, but I read about this being a WebKit bug dealing with 3D transforms and that it can be fixed for GSAP by disabling 3D with: force3D: false; That alone didn’t fix it for me, but combined with your will-change suggestion, I got better results: https://codepen.io/knusngh/pen/ExQXxYB It’s still not perfect, but maybe that has to do with the image resolution of 4000x2700. Maybe being scaled down to fit the browser and then scaled up from that is causing some issues. I’m wondering if it would be better to scale the image down and scale up from that for the animation. So… instead of: {scale: 1} → {scale: 3} → {scale: 2} use something like: {scale: 0.25} → {scale: 1} → {scale: 0.5} (So the image would be scale: 0.25 by default.) But that causes some issues too. If I don't set the image height and just scale the container or image down to 0.25, I’m having trouble getting the image to still responsively fit 100% of the viewport height. So maybe that’s a way to retain the image quality, or maybe there’s a better way with GSAP. But that’s where I am right now. I’m still trying things out but just wanted to post an update in case anyone has some suggestions or tips. I’ll post again if I hit a dead end and can’t find any possible solutions. Thank you for all of your help and time! A big part of the reason I’m committed to learning and using GSAP is how helpful the community is.

Sorry for the second question, but (hopefully) this is a quick one: When the animation triggers, the image gets blurry. Without ScrollTrigger, the image quality becomes sharp again at the end point of each section. With ScrollTrigger, it remains blurry until the end of the entire animation. Is this issue being caused by the image size or by codepen? Or is there a way to get ScrollTrigger to keep the image sharp even while it’s animating?

Thank you for your time and your kind responses, @GreenSock and @Cassie! I apologize for the long wall of text and the “how do I recreate ____?” post. I’m sure these things can probably get quite tiresome to encounter. I’d love to look into the freelancing and support GSAP developers. I just wanted to try it out first because I’m really tight on money right now due to medical bills for my son’s health. Do you know a rough estimate of what price range would be fair for an animation like this? As for my post, I’ll simplify it into one question, in case one of you have the time to help me with it. Here’s a codepen that I forked from @GreenSock: Without ScrollTrigger: https://codepen.io/knusngh/pen/NWydowM With ScrollTrigger: https://codepen.io/knusngh/pen/yLvgexj The sections are not all supposed to be the same size, @GreenSock — they are just that way from your demo that I forked and I didn’t change them because it makes the following animations act weird. Right now, the way you set it up is: Section 1: default state Section 2: Zooms to first spot Section 3: returns to default state Section 4: Zooms to second spot So what I want to do is replace the “return to default” sections with a transition sections that zooms out a bit at the origin midpoints of the sections it’s connecting. Since each section is 100vh, the first transition would go from Section 2 to the origin midpoint of Section 2 and 4 in 50vh, then go from that point to Section 4 in 50vh. For example: // starting from section 1, the default state. {scale: 1, origin: [0.5, 0.5]}, {scale: 3, origin: [1, 0.5]}, ↓ after 50vh ↓ {scale: 2, origin: [0.5, 0.25]}, //transition ↓ after 50vh ↓ {scale: 3, origin: [0.75, 0]}, The x and y origin of transition [0.5, 0.25] is exactly in the middle of the x and y of section 2 [1, 0] and section 4 [0.75, 0]. Thank you again for your time!

Also, one last thought: Could the transition sections somehow be coded to calculate the halfway points between the sections their connecting? For example: Section 2 is the right foot. Section 4 is the left shoulder. Could section 3 find the midpoint between whatever the xPercent/yPercent is on section 2 and 4 so section 3 can zoom out right at the middle of those before zooming back in? And then the same for section 5 (midpoint between sections 4 and 6), section 7 (midpoint between section 6 and 8), etc.

Hi @PointC! Thank you so much! That was incredibly helpful, and now I actually have a codepen I can supply as a starting point: https://codepen.io/knusngh/pen/yLvgexj I still have a few issues I need worked out. I tried to figure them out by myself but my inexperience is really holding me back. Here are the few things left: 1. I need some of the sections to be quicker animations and some of them to be longer. For example: — After zooming into Section 2 (foot), it would be nice to have about ~200vh of scroll space before the Section 3 animation, just to provide some text information about the foot that’s zoomed into before moving on. — After Section 2, every odd numbered section (section 3, 5, 7, etc.) is kind of a “transition” section. It zooms out a little and resets the image to center before zooming into the next body part section. The animations to and from these sections would need to be a little quicker. So, to clarify, in case that was confusing: - the animation from section 1 (default) to section 2 (first zoom in) is great, but after that… - section 2 (foot) needs about ~200vh of scroll height for text about the foot to fade in and out before animating to section 3. - the animation from section 2 → section 3 → section 4 needs to be shorter, since section 3 is just a transition that resets the scale and pan before the next scale, so section 3 should be subtle rather than noticeable the way section 2 and 4 are. - section 4, like section 2, needs the 200vh of scroll space for info about the body part it’s zoomed into. - animation from section 4 → section 5 → section 6 is a transition again, so it needs to be faster. … and so on. (it’s how it’s done on the original source website I provided, in case my explanation is still confusing.) I’m assuming there’s some type of code to simplify this with arrays or even/odd logic rather than making separate timelines for every animations. I just don’t know how to do any of it. Is there any chance someone with experience in this help me out with how to code this in? The other issues have to do with sizing: 2. The image is 2700x4000. The source seems to render this at 1350x2000 by setting a parent container to scale: 0.5, which probably helps with image quality when scaled to “zoom in.” I couldn’t figure out how to get that done. With the way it is now, it appears blurry because it’s being shrunk down so much to fit the viewport. 3. The image also doesn’t fit the viewport responsively on all devices. I tried it on a few different sized screens and some of them had issues with either the right side being cut off or the image not fitting the viewport. is there something incorrect in my css or something I can include in the js to have the image fill 100% of the viewport height regardless of the browser size (without messing up the animations)? Sorry if that’s a lot to read. This projects means a lot to me, and learning how to do this is really important to me. Words cannot express how much any help on this would mean to me. It would be awesome if Jack could weigh in too — if he has the time — since it was his demo that was linked. I’m guessing he’d have a quick solution for all of this. @GreenSock Thank you so much!

Hi! I’m new to GSAP, so please forgive me for not providing a minimal demo. I’ve set up a basic codepen template to start plugging in the GSAP code necessary, and I’m just looking for some guidance on where to start. I’m trying to recreate an animation that pans and zooms into an image as the page scrolls. Looking through the code, it looks like it was created with GSAP and Skrollr rather than ScrollTrigger. Here is a link to the animation. You’ll see it if you scroll down just a bit. An image of a NFL quarterback fades in, then zooms in (scales from 0.23 to 0.5) and pans into an ankle, then zooms out and zooms into a different body part. What I’m having issues with is the responsiveness. Regardless of what size the browser is resized to, the images and animations adapt to fit the viewport perfectly. It looks like this is done by setting the section height based on the viewport height and using transform:scale on the image container. I’ve spent countless hours in the last week trying to figure out how to make this work but haven’t been able to find a solution. I used some JavaScript in the codepen that seems to resize the image responsively, but I keep feeling like there’s a better and smoother way to do this. Looking at the code of the source site, I found these resize events and code that may be related, but they’re a bit complicated since they apply to several animations (several quarterbacks being scaled and panned). I’m just trying to apply it to only one section (for example, just one quarterback), which I think would be simpler to code. I’m not sure how to make these work with my own project. Here is a link to the site’s JavaScript code: https://a.espncdn.com/combiner/c?v=80&js=pagetype/otl/eticket2020.js,pagetype/otl/2020/201012_nfl_elder_qbs/vendor.js,pagetype/otl/2020/201012_nfl_elder_qbs/main.16.js&minify=false So, to wrap it up, what I’m looking to accomplish is: — resize a 2700x4000 px image to responsively scale to viewport. — responsively scale and pan to zoom into different body parts on the image. — would using GSAP’s Flip be most effective to get this done? — if it’s not too complicated, could someone write out code that’s responsively panning and zooming into a random body part? Just as an example of how it would be done. Again, I’m very sorry for not giving a better demo or if this is confusing at all. I would greatly appreciate any help or guidance at all. If this is a lot of work to figure out, I’d be willing to pay for any help with a solution at this point. Thank you in advance!