Jump to content
GreenSock

KinnuSingh

Responsive position and scale

Recommended Posts

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!

 

See the Pen zYRoMOo by knusngh (@knusngh) on CodePen

Link to comment
Share on other sites

Hi @KinnuSingh

 

Welcome to the forum.

 

I think this thread can help you with that animation.

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Hi @PointC! Thank you so much! That was incredibly helpful, and now I actually have a codepen I can supply as a starting point:

 

See the Pen yLvgexj by knusngh (@knusngh) on CodePen

 

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!

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Hi @KinnuSingh. Looks like a fun project. You've definitely crossed way over into the "custom consulting" zone here :)

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

All of what you're asking about seems very doable to me, but it's time consuming and you may have some logic issues on your had because you have equally-spaced sections but you seem to be saying that you want them to go at different speeds, have varying amounts of animation crammed in, etc. but in terms of scroll distance they're all the same so that's a logical impossibility (unless I misunderstood). You can pin things, of course. Definitely not a simple "add this one parameter and it magically accomplishes all of your to-do list". 

 

I'd suggest only focusing on getting the animation just right WITHOUT connecting it to scroll at all first. Imagine the user scrolling at a constant speed to view the animation. Once you can just play the animation and it looks the way you want (in one timeline most likely), THEN hook it up to ScrollTrigger.

 

You'll also have a better chance of getting answers here if you just focus in on ONE thing at a time. "How can I ____?" and provide a minimal demo. It quickly gets overwhelming to read laundry lists of requirements, "I want it to this ____ and this___ and then this____ and also remember that it should ____." :) That's fine for a paid consulting project, but if you want help in these free forums it's definitely best to keep things very focused on one question/challenge at a time (one thread per challenge). 

 

Good luck!

  • Like 2
Link to comment
Share on other sites

It may help to take a minute and watch this video too.

Pretty much every question you may have about ScrollTrigger's workings will be covered in here. And if they're not - feel free to ask away (but as GreenSock mentioned, maybe just stick to one question at a time!)
 

Introducing ScrollTrigger for GSAP from GreenSock on Vimeo.

  • Like 3
Link to comment
Share on other sites

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:

See the Pen NWydowM by knusngh (@knusngh) on CodePen

With ScrollTrigger:

See the Pen yLvgexj by knusngh (@knusngh) on CodePen

 

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!

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Hey there! Have you watched the video on ScrollTrigger? It should give you a much better understanding of how to approach this. Right now you have scrubbed animations, but you could also set it up to just trigger an animation at certain points.

You've got the logic worked out - The next step is to convert that to an animation. All the information you'll need to get going should be in that video - why don't you give a solution a go? If you get stuck we can take a look and give you a hand.
 

2 hours ago, KinnuSingh said:

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.

Try adding 'will-change: transform' on your image in the CSS

Here's an example of a scrubbed tween and a non-scrubbed tween to get you going.

See the Pen JjpWNmY?editors=1010 by GreenSock (@GreenSock) on CodePen



If you have any gsap-specific questions like 'how do the start values work' or 'what are toggleActions' we're happy to help. But we can't build out solutions for you to spec I'm afraid.

Best of luck getting this done!

  • Like 2
Link to comment
Share on other sites

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:

 

See the Pen ExQXxYB by knusngh (@knusngh) on CodePen

 

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. :) 

Link to comment
Share on other sites

4 hours ago, KinnuSingh said:

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.)

Yep, in general I have found that to be true. Browsers tend to render things fuzzy when you go above a scale of 1. 

 

4 hours ago, KinnuSingh said:

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.

If you're having trouble, please provide a minimal demo with only that one part and we'd be happy to take a peek. 

 

4 hours ago, KinnuSingh said:

A big part of the reason I’m committed to learning and using GSAP is how helpful the community is. :) 

It is indeed a pretty cool community around here. 🙌

 

Good luck with the project.

Link to comment
Share on other sites

4 hours ago, KinnuSingh said:

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.)

Yep, in general I have found that to be true. Browsers tend to render things fuzzy when you go above a scale of 1. 

 

4 hours ago, KinnuSingh said:

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.

If you're having trouble, please provide a minimal demo with only that one part and we'd be happy to take a peek. 

 

4 hours ago, KinnuSingh said:

maybe that has to do with the image resolution of 4000x2700.

Yep, that's a pretty big image. Browsers sometimes split things into chunks to manage it in memory better. This is all totally unrelated to GSAP. You might want to try a smaller image. 

 

4 hours ago, KinnuSingh said:

A big part of the reason I’m committed to learning and using GSAP is how helpful the community is. :) 

It is indeed a pretty cool community around here. 🙌

 

Good luck with the project.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×