bunk Posted March 10, 2021 Share Posted March 10, 2021 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! Link to comment Share on other sites More sharing options...
akapowl Posted March 10, 2021 Share Posted March 10, 2021 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. 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted March 10, 2021 Share Posted March 10, 2021 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 10, 2021 Share Posted March 10, 2021 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. Link to comment Share on other sites More sharing options...
tailbreezy Posted March 10, 2021 Share Posted March 10, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 10, 2021 Share Posted March 10, 2021 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}); 1 1 Link to comment Share on other sites More sharing options...
bunk Posted March 10, 2021 Author Share Posted March 10, 2021 (edited) 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 10, 2021 Share Posted March 10, 2021 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. 3 Link to comment Share on other sites More sharing options...
akapowl Posted March 11, 2021 Share Posted March 11, 2021 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'. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now