Jump to content
GreenSock

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

I there a way to decrease font size as a page scrolls

Recommended Posts

I am new and am not sure what to use, I have the full gsap package.  What I want is a static menu that get smaller as you scroll the page down. (CampfirePixels)  I can always do it with css and breakpoints, but I wanted to do it with JavaScript if I can.  See https://d.pr/i/YtUG7r.

Share this post


Link to post
Share on other sites

Hey dgs. Welcome and thanks for being a Club GreenSock member!

 

There's a few different ways to do this sort of animation. The way that I would do it is something along the lines of this:

 

var tl = new TimelineMax({paused:true})
tl.to(".box", 1, {"scale": 0.3})

var maxDistance = 400;

window.addEventListener("scroll", function() {
  var yPos = window.scrollY;
  tl.progress(yPos / maxDistance);
});

See the Pen BaBpELw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm happy to explain any part of this if you're having any trouble!

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×