Jump to content
Search Community

Turn my animation code into GSAP code

TrinitaGirl test
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

Hi everybody!


By advance, please excuse:

1. my english (I'm french, and I don't find any good answers about Gsap on french forums...)

2. my less of knowledge about coding... I know what is Code for.. 2 weeks..

3. my (a bit) blonde brain..

But I got faith and I'm ready to learn!!!


So, here's the situation:

My final goal is to make a full personalized menu for my blog, that contains very seamless animations.

The first animation (which I'm testing now) is color changing of the buttons' letters.

The second one will be the "deployment" of an image that "get out" behind each button and then come in.

Both animations will start "on mouse over" and when the button is clicked and the relative page is activated.


My first question is about the first, simple animation: color of the buttons.


What I'v already done:

- created a drawn menu on Gimp

- created the same image but with each button in right color for activated state

- I've search for a few weeks on tutorials and forums, and found a code that works


"A code that works"... BUT:

  • it seems to work only on certain machines (don't understand why it works on my mac on Google Chrome but not on my office's PC on Google Chrome too!)
  • and most of all, it is no seamless at all! (got to wait a few seconds with mouse over before the -images charge and- color changes.


I read some interesting stuffs about the "wonderful Gsap library". But it's very difficult for me to understand how to make the right gsap code that is very complicated for me compares to my actual code (I don't even know if it's "simple javascript" code or something else - you will see that).


Could you please give me a simple explanation of what I need to do in my case, or even indicate the right code to me..?


Here's my code:

<img name="Menu" src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%C3%AF%20crash%20test%20gelly%20texte.png" width="960" height="95" border="0" usemap="#menu jelly kobai" />

<map name="menu jelly kobai">

<area title="Accueil" shape="rect" coords="4,27,117,93" 
href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" onmouseout="document.Menu.src='https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'"
onclick="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" alt="Accueil'" />

<area title="Une Blonde et Blogger" shape="rect" coords="128,27,245,94" href="http://uneblondeet-blogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" 
Onclick="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" alt="Une Blonde et Blogger" />

<area title="Onglet test" shape="rect" coords="255,27,369,94" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" 
Onclick="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" alt="Onglet test" />


Sorry for the entire code, I've searched in it but didn't find this widget's code - ??

(it's a HTML/Javascript widget in a Blogger blog.


url of my "testing" blog:



Thanks a lot by advance for your help!


Trinita Girl


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


For what you are trying to do I really don't think you need GSAP. It seems you are just trying to swap one image for another on mouseover/hover. This can be done with basic CSS:










If you want to start animating CSS properties of elements like color, background-color, opacity and move things around, then yes I would suggest getting into GSAP.


I would recommend a few things


1: Start small

2: Do NOT try to integrate with your blog or its software as you are learning. 

3: Use CodePen.io as a coding playground as we often do for our demos, training and support (more on this later)

4: Read through the Jump Start and Getting Started guide http://www.greensock.com/get-started-js/

5: explore the code in all the Jump Start demos on CodePen: http://codepen.io/collection/ifybJ/

6: Learn how to create a GSAP-enabled CodePen demo: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/


Hopefully this helps get you on the right track. The key, again is to start small and experiment. If you run into trouble just create a simple CodePen demo that we can help you troubleshoot.

  • Like 2
Link to comment
Share on other sites

Hi Carl,


Thanks a LOT for your response, tips and interesting links.


So I will use those recommendations to learn about gsap first.


About my menu > I wanted to get a Gsap code because my result with this code is so slow an unesthetic / and uncompatible with some browsers,

and most of all because it tends to become a menu with complex other animations and I wanted to make everything with gsap from the beginning.


Could you please tell me what kind of code did I use for my result?

Is it Javascript without any sort of library or pluggin?


Thanks a lot


Trinita Girl

Link to comment
Share on other sites

Oh, sorry just one more thing:


You tell me that I should not try to integrate it in my blog.

But the reason I make all these research -except pure fun- is that I'm making a blog which goal is to teach to "other """Blondes""" " how to make and personalize a blog on Blogger...


Here's why I have to test it on Blogger..


How can I do, then? Do you think I must create a web site that will help me to learn about gsap and css, javascript html etc?



Link to comment
Share on other sites

As for your blog, I'm just saying that when learning its best to remove all unnecessary layers of complexity and potential problems. Its best to know that your GSAP code is working before getting it to work in a blog.




Concerning your existing code, it appears you are using javascript to change the src attribute of images, which leads to new images being loaded and can be slow.




As for creating rollover effects with GSAP, I would start with something simple like this:

See the Pen %25C2 by GreenSock (@GreenSock) on CodePen



Which uses a little jQuery for adding some mouseevent handlers to list items and TweenLite to animate some colors of CSS properties.

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...