Jump to content
Search Community

Fill the browser with a scaled letter from a certain origin

bennyboy1978 test
Moderator Tag

Recommended Posts

Hey @bennyboy1978

 

At the same time you animate the scale of the .h14, you could animate it's position on the x-axis to get the desired result.

Check this pen:

 

See the Pen 3ef334d517b871950b3f0a5b1380759c by akapowl (@akapowl) on CodePen

 

I also set the overflow of your loader to hidden, otherwise the scrollbars would go crazy because the h14 takes up a lot of space on the page when scaled up that high.

 

Hope this helps.

Cheers,

Paul

 

 

 

Edit

If you want to reveal the actual content underneath when it's done, you could then e.g. in an onComplete-function tween the autoAlpha of the loader to 0 like this:

 

See the Pen 03633a8fb409b9f3d98d7dfb39e209da by akapowl (@akapowl) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Thanks guys!
@akapowl I actually tried your method before but the main problem I have (sorry, I should have explained better) is when the font size changes the x position would need to change to fill the browser correctly. I'd like to have a bigger font size on desktop than mobile.
Here's an example of your updated pen with a bigger font size 

See the Pen dyMVxZL by Bennyboy (@Bennyboy) on CodePen


 

Link to comment
Share on other sites

 

If your font-size is always dependent on the viewport-width, you could set the x-translation up with function-based values, like maybe so:

 

var enterIntro = gsap.timeline({ paused: true });

enterIntro
.to(".h14", { delay: 0.5, duration: 5, scale: 500, x: () => ( window.innerWidth*0.05 * 160 ), ease: "power1.inOut"})
;

 

 

 

If this only runs once, when the window is loaded, as loaders usually do, you wouldn't even have to worry about resizing.

 

But if you wanted to take resizes into account, you'd have to set up a resize-function, where you kill the old timeline and set up a new one everytime the browser is being resized - maybe somehat similar to what i did in the startTL-function that fires the timeline on click of that button in the following pen:

 

See the Pen dbd635a93721866e7b2bf191e245db3f by akapowl (@akapowl) on CodePen

 

 

I am pretty sure, there probably is a more sophisticated way to this.

But I think to a certain degree the example in the pen works pretty well.

 

 

 

Edit:

If at one point - let's say below 800px window-width - your font-size is going to stay the same (40px in the following pen), you could adress this by using a window.matchMedia query and say that below that width the x-value needs to be a specific number catering to that fixed font-size, maybe like so:

 

var lowWidth = window.matchMedia("(max-width: 800px)");

var enterIntro = gsap.timeline({ paused: true });

enterIntro
.to(".h14", { delay: 0.5, duration: 5, scale: 500, x: () => lowWidth.matches ? 6500 : ( window.innerWidth*0.05 * 160 ) , ease: "power1.inOut"})
;

 

 

See this pen:

 

See the Pen 64459eb8b00c43ec3f2c959b414f30a7 by akapowl (@akapowl) on CodePen

 

 

 

 

  • Like 4
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.
×
×
  • Create New...