ScrollTrigger Pin & Scale

[bunk]

Hello,

I've been looking at bunch of docs and tried for 9hrs+ to get this working but can't seem to figure out what I am doing wrong...

What I'm trying to achieve is the "portfolio" section in this website - https://www.bikebear.com.my/. The site uses ScrollMagic but I think this is possible with ScrollTrigger. 

I was able to pin it and "zoom" into it but it's very janky and doesn't feel as smooth and can't seem to quiet get the full "zoom-in" affect. Please help~ Thank you!

[akapowl]

 

Hey @bunk - welcome to the forums.

 

There are a lot of helpful people on here, who I bet are willing to guide you into the right direction.

But it's impossible for us to know what might be causing your issues if we don't have the slightest idea about your code.

 

So if you'd like some assistance on this, it would be great if you could create a minimal demo of your efforts so far.

 

[tailbreezy]

Hello,

 

By the way this effect utilizing the transform scale and transformOrigin results in a blurry mess in firefox. (gets worse the more you scale)

So not really a great solution after all, scaling the fontSize works proper but is more difficult to adjust.

 

 

[ZachSaucier]

1 hour ago, tailbreezy said:

By the way this effect utilizing the transform scale and transformOrigin results in a blurry mess in firefox. (gets worse the more you scale)

So not really a great solution after all, scaling the fontSize works proper but is more difficult to adjust.

You might be able to get around this issue through work around like adjusting the font-rendering or adding a slight rotation to make Firefox spend more time rendering it.

[tailbreezy]

1 hour ago, ZachSaucier said:

You might be able to get around this issue through work around like adjusting the font-rendering or adding a slight rotation to make Firefox spend more time rendering it.

 

I did try all of those options, but none seemed to work.  Possibly Mozilla broke it again on later releases.

 

See the Pen fef612ff41dd7328230dc1f746a37e62 by dadacoded (@dadacoded) on CodePen

[GreenSock]

Yep, that's a browser rendering thing - the element gets rasterized at its "normal" (native) size and then it just applies the transforms to that rasterized version. That's why I always recommend making the native size very large, and then just scale from a small value to 1. In other words...

// BAD
font-size: 10px
gsap.to(... {scale: 20});

// GOOD
font-size: 200px;
gsap.fromTo(... {scale: 0.05}, {scale: 1});

 

[bunk]

So this is what I have so far. Little janky but slightly close-ish haha. 

 

Fewproblems with this-

1. it's not fluid/smooth

2. it doesn't scale/zoom in all the way depending on the size of the screen 

3. the scrollbar is way too long but I don't know how to shorten it without affecting the "amount" of zoom it does when you scroll slowly

 

Any input would be REALLY appreciated! 

 

See the Pen ZEBVzew by Bunked (@Bunked) on CodePen

 

Edited March 10, 2021 by bunk
first time using this and didn't know how to upload codepen into the comments

[GreenSock]

Maybe put it into a container <div> that has overflow: hidden and is sized to the screen. The problem here is that you've got a LOT of content spilling over and making the page bigger. 

 

As for performance, you're putting a ton of stress on the browser's graphics rendering because it has to push around soooo many pixels. It's always best to minimize the number of pixels that change on each tick, and keep in mind that the browser still has to figure in the off-screen stuff in most cases. You may need to consider canvas or something like that. Maybe even SVG with overflow: hidden would work better. Worth a shot. 

[akapowl]

16 hours ago, bunk said:

1. it's not fluid/smooth

 

I think the main reason it doesn't feel as smooth in your demo as it does on the page you linked to is, that they use a library for smooth-scrolling on there.

ScrollTrigger is not intended for doing something like that, but you can get an effect similar to that for your animation, when using scrub with a number instead of true.

 

In combination with setting overflow: hidden to your container as @GreenSock suggested that would give you some issues to deal with layout-wise though e.g. when scrolling back up, the text might be cut off for some time. Using a smooth-scrolling library in combination with scrub: true would give you the smoothness and prevent those layout-concerns BUT it would open up a whole new world of issues you could and probably would run into sooner or later.

 

 

 

17 hours ago, bunk said:

2. it doesn't scale/zoom in all the way depending on the size of the screen

 

I suppose, that is something you would just have to finetune your values for until you find that they fit all various sizes - or you add in some calculations based on the initial font-size (probably more like the initial width of the letter you are zooming into) and the window's width. But since that is nothing directly related to GSAP it's a bit out of scope for these forums.

 

 

 

17 hours ago, bunk said:

3. the scrollbar is way too long but I don't know how to shorten it without affecting the "amount" of zoom it does when you scroll slowly

 

Well, that is just how it works, I guess. You need the amount of scrolling space to determine how 'fast' your scrubbing-animation takes place.

The only way to shorten the scrollbar (which represents the scrollable amount of a page) is to reduce the content.

But if you'd only have 100px to scroll though, you'd only have that amount for the scrubbing animation to take place - thus it would happen way 'faster'.