Jump to content
Search Community

interactive samples of rollovers and show/hide content?

timaging 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



I need to create an interface. I used to do this using flash greensock, but i need to do this now in js. I can't seem to find any examples, and I'm not quite hitting the mark on creating it.


sort of an idea is like this:




you roll over the buttons on the side and fade back and forth


BUT I also need to add something in that's in a timeline so that they rest on one state, then go to the next after about 6 seconds.


it's something that can be done in Flash, but I can't seem to figure it out in the .js version.


is this possible? Are there samples?


trying to swap between the attached images. I want it to rotate between the images if the view doesn't do anything


I've got a canned version that I used WOW slider for, but it's so generic, and the client wants the user to be able to actually roll over the names







Link to comment
Share on other sites

Hi Dave,

here are two simple examples of hover and click interactions.

var $box = $('#box'),
    $boxSmall = $('#boxSmall');

// Click
$box.on('click', function(e){
   TweenLite.to($boxSmall, 0.3, {x:'+=100px'});

See the Pen YXBWwo by ihatetomatoes (@ihatetomatoes) on CodePen

// Hover
   function() {
      TweenLite.to($(this), 0.3, {scale:1.2}); // mouseover
   function() {
      TweenLite.to($(this), 0.15, {scale:1}); // mouseout

See the Pen qdgNdL by ihatetomatoes (@ihatetomatoes) on CodePen


For you other scenario where you want to pause a timeline and restart it after a few seconds, you can use .addPause and then restart the timeline using a callback function.


This thread has some code snippets that to exactly that:




Hope that helps.




  • Like 3
Link to comment
Share on other sites

Hi Dave,

   You could use any HTML element as the target. Here is a pen using images as the targets. Note: I modified it a bit to make everything happen in the handlerIn ... this will ensure one of the target elements (the last active) will remain visible if you travel outside of the list (i.e. navigate up and out of the first, down and out of the last, or horizontally out of any in-between.


See the Pen jPJvZp by sgorneau (@sgorneau) on CodePen

Link to comment
Share on other sites

oh man... sorry about that.. I was more referring to the years on the right. Actually this whole thing is graphics, and I'm also going to want to do some sort of fade in/out, but I'm assuming I can figure that one out on my own.


What is handlerIn? I don't recognize that from the flash version?




Link to comment
Share on other sites

What is handlerIn? I don't recognize that from the flash version?



The hover() method used here is from jQuery ( http://api.jquery.com/hover/ ) ... the selector engine I (and many) typically use in addition to its event handlers. In this case, hover accepts 1 or 2 parameters


.hover( handlerIn, handlerOut )


.hover( handlerInOut )




Type: Function( Event eventObject )
A function to execute when the mouse pointer enters the element.
Type: Function( Event eventObject )
A function to execute when the mouse pointer leaves the element.
Type: Function( Event eventObject )
A function to execute when the mouse pointer enters or leaves the element.
Note, I couldn't just use the handlerInOut because I don't want to execute the same code on both events. I could have opted for the .mouseenter( handler ) method alone, but there are a few things that I did want to happen during handlerOut ... so hover() with two parameters was the way to go.
I recommend having a look through http://api.jquery.com/category/events/
Link to comment
Share on other sites

ok, so I've tried for hours to get this to work and nothing seems to add up for me. Plus I don't write javascript, so this is super tough.


I've posted the actual behavior using iFrames and the built in show/hide from Dreamweaver. I need those images to fade on hover, and then onclick, the image to the right would fade in instead of calling a url. All stuff I could do in Flash. In addition to that, when the viewer is not actually rolling over anything, this would automatically go to the next image after a few seconds.


i'm thinking that I might actually be able to use GS for flash, and have this export? 



Link to comment
Share on other sites

First things first ... don't use anything that Dreamweaver offers for DOM manipulation. Better yet, don't use Dreamweaver (but that's a different conversation). The big challenge here (and I remember this clearly from when I jumped from Flash in 2003 to HTML/CSS/JS) is moving from the stage/timeline environment of Flash to what seemed like a boundless world of code where I had to constantly dip in and out of different environments.


The biggest thing to get a grasp of is what code is markup vs style vs action. For the most part, this is pretty straight forward. As you get further along, it gets a little muddy because some actions can be handled (and quite beautifully) with CSS3 transitions/transforms .... and then you get to progressive enhancement which can lead to JS performing some markup tasks. But, for now ... the structure of your document is handled by HTML (that is, the things you need on the page regardless of position and styling); CSS will take care of layout, positioning and styling; and Javascript will take care of interaction and manipulation.


I think I understand what you're explaining above in terms of your requirements ... and I'd be happy to create a codepen demonstrating how to accomplish it ... I'll just need a few minutes.

Link to comment
Share on other sites

that would be amazing, and I could even send you these files, and if you have paypal, I'd gladly compensate you... I can't seemt to wrap my head around this concept, and can't seem to port my knowledge from flash to the new mobile-friendly style.

Link to comment
Share on other sites

that's the general concept. It should hang on each for about 4 seconds and transition for about 1 second... but if you click on one of the nav items, then it should stop and stay for maybe 30 seconds.


When I tried deconstructing your files though, my buttons covered up the main image and I couldn't figure out how to move that. I think I saw a tag of absolute but there was no value?


This may make it easier: Here are the image files for the project, along with the current behavior that Dreamweaver offers. I know it's clunky, but it works. Just a note ahead that i'll probably put all this in an iFrame.


Thank you so much for your help. I really do appreciate it, and can learn from your file. This should be a great jump start for me, and porting over to 





Here's one I did using Greensock for Flash... basically the same behavior that I'm trying to replicate



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