Jump to content


Move Content to Static Header

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, I'm new here. I'm redesigning my personal website and I wanted to make the current position of the social icons change to be part of the header once they are scrolled over. I wanted some type of animation timing effect that was triggered by the position on the page. 


This is my first time playing with Tween and Timeline, so I'm really a novice as to how things work. I've been playing with it, but all the extra effects will most likely be removed once I figure out exactly what it is I need and whether or not Tween can handle it. 


So here it is: http://marlonstevenson.com 


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Thanks for trying GSAP.


We really try to focus on helping people how to animate and not so much on the finer points of JavaScript and CSS. What you need to do could require some special attention with both. 


The good news is that jQuery makes it fairly easy to respond to scroll events, so it can be fairly straightforward to trigger a GSAP animation when the user scrolls.


Here is a very basic implementation:

See the Pen ae8949594dc1f0eb78d677c2bb9cf514 by GreenSock (@GreenSock) on CodePen

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.