Jump to content


animating size based on where we are on the page

Recommended Posts

So i am completely new to greensock and javascript animations in general and relatively new to javascript (although I know other web languages HTML, CSS, PHP, MYSQL)



I have a website that works like a single page website where the navigation just goes to div ID's and I use a basic smooth scroll to the get there. My navigation is fixed to the top of the page.


So in the navigation bar that is fixed to the top of the page, I have this little tag that I would like to drop down / expand when you are on a specific div and then shrink back up when you go away from that div


If I am not making sense, here are some screen shots:


The "home page" which is basically the first <div> in the stack



the "about page" which is the third <div> in the stack


Link to comment
Share on other sites



Glad to hear you are learning javascript and especially the GreenSock tools. I am in a similar boat of getting up to speed with javascript and so far have found the GreenSock tools an amazing to way to start building cool things quickly.


I understand in general terms the effect you are trying to make. Thanks for the screenshots.


I would love to do all I can to make your experience with the GreenSock tools as enjoyable as possible and help you with any questions you have about them. In order to ensure that same level of support to everyone we have to keep the subject matter focused on questions that revolve around specific usage of the GreenSock tools.


We can certainly do our best to figure out why your implementation of the GreenSock code isn't working. A question like "How do I make a div expand using TweenLite?" is something we can assist with. Even, "How can I make a div expand when the user clicks on a link" would be fair game.


When things get more complex like detecting how to trigger a tween once the user scrolls to a particular div; that can require a good amount of work. Perhaps that isn't a feature you need. Maybe you could just explain exactly what type of help you were looking for.


You may be interested in the new scrollToPlugin discussed here: http://forums.greensock.com/topic/6056-scrolling-the-page-up-and-down-with-greensock-js/page__p__21767__hl__scrolltoplugin#entry21767


You could use the links in your nav to scrollTo a particular div. When that tween is complete you could use an onComplete callback function to open up your expanding div.


I hope you continue to make progress with your project and get the most out of the capabilities of GSAP12. Please don't hesitate to post back with questions if you need any help understanding how to solve a problem you are having with the GreenSock tools





  • Like 1
Link to comment
Share on other sites

Hi carl - thanks for the nice introductory answer and information.


I totally understand that you can't give everyone individualized support on how to work soemthing for THEIR websites.


I do not understand, though, how my question on how to initiate an animation based on a specific location on a page is unique to my situation.


My implementation of GreenSock isn't NOT working, it's not there. I don't exactly know how to do that type of "off set" to trigger the same animated multiple ways.


Am i making sense?

Link to comment
Share on other sites

Yes, certainly.


The difficulty with your situation is that you are asking for help with something that is

a: outside of the core role of the GreenSock tools (detecting locations of divs in relationship to the viewport)

b: not trivial to implement correctly

c: outside of my own realm of expertise


If I had a working example of that type of system I would gladly share it. There is a chance that someone else reading this forum may jump in and say "no sweat that's easy".


Ultimately, you will be better served if you seek assistance in a more generalized javascript help forum or http://www.stackoverflow.com for assistance on the div location detection system that you wish to build.


I wish there was more that I could do.



Link to comment
Share on other sites

Ok i understand.. I thought that because GreenSock has the offset functions for the animations that there might be additional ways to offset and trigger the animation based on which div container is in the viewport.


As I said, I am new to javascript and all of this, but I am not new to coding. I understand the logic but really need to grasp the available features of such a library better.


Hoping the Greensock can help me more in the future, but itseems as though I might be best off going with a basic jquery option for this ttype of animation.


Thanks.. and if ANYONE comes across this post and has some input, I am still open and working with it.

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.