Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bennyboy1978

Fill the browser with a scaled letter from a certain origin

Recommended Posts

Hey guys,
I'm looking for a way to fill the browser window in black when the words animate out - from the centre of the "X" in "UX.

I can't figure out how to make it work on all devices.
Thanks!

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

Share this post


Link to post
Share on other sites

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 ExKwqYo 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 GRZMVmR by akapowl (@akapowl) on CodePen

 

 

  • Like 4

Share this post


Link to post
Share on other sites

I would fake it with chaining the background color of the loader to black at a certain point. It is also better to use the gsap 3 syntax instead of the old syntax

 

   Here is a small demo, try to tweak it yourself to help you understand it better 

See the Pen OJNxKNP by mvaneijgen (@mvaneijgen) on CodePen

  • Like 4

Share this post


Link to post
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


 

Share this post


Link to post
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 NWNaQej 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 ExKbYZB by akapowl (@akapowl) on CodePen

 

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Legend! Thanks @akapowl, this is exactly what I needed! Cheers.

  • Like 2

Share this post


Link to post
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.

×