Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Geert De Decker

on mouse over

Recommended Posts

Hey to you all. I am very very new in Tweening and programming in general and studied a bit the past months. Have a small one running on my website www.casitadelcuco.es but can't find out how I can add a simple mouse over effect.

 

I have this Tween  :

 

var myBannerTimeline = new TimelineLite();
myBannerTimeline.from('#vogelhuisje', 5, {css:{top:-500}, ease:Bounce.easeOut})
        .from('#plank01', 1, {css:{left:-20,top:30}, ease:Bounce.easeOut})
        .from('#plank02', 1, {css:{left:40,top:-50}, ease:Bounce.easeOut})
        .from('#plank03', 1, {css:{left:-60,top:70}, ease:Bounce.easeOut})
        .from('#plank04', 1, {css:{left:80,top:-90}, ease:Bounce.easeOut})
        .from('#plank05', 1, {css:{left:-100,top:20}, ease:Bounce.easeOut})
        .from('#gat', 1, {css:{opacity:0}})
        .from('#schaduw', 2, {css:{top:600}, ease:Bounce.easeOut})
        .from('#schaduw', 2, {css:{opacity:0.1}, ease:Bounce.easeOut})
        .from('#webhuisje', 3, {css:{left:-800,opacity:0}, ease:Bounce.easeOut});

 

Now how can I make that when you go with your mouse over plank01 or plank02 or ... plank05, that all 5 elements go seperatly in 5 different directions.

 

Just can not find it. Hope somebody wants to help me.

Link to post
Share on other sites

Would be very gratefull if somebody can help, just can't get started with on mouseover, even after checking out several codepen demos and searchs here at the forum.

Link to post
Share on other sites

Hi

 

jQuery will make this quite easy. Here is an example: 

 

//animate in
TweenMax.staggerTo(".box", 0.5, {x:200}, 0.1)

//when a .box is mouseenter-ed call the disperse function
$(".box").on("mouseenter", disperse)


function disperse() {
//loop through all .box's and randomly tween them
  $(".box").each(function(index, element){
    TweenLite.to(this, 1, {x:Math.random()*400, y:Math.random()*500})
  })
}

 

demo: http://codepen.io/GreenSock/pen/xumsB/

 

jQuery on(): https://api.jquery.com/on/

jQuery each(): https://api.jquery.com/each/

Link to post
Share on other sites

Thanks Carl, wil give it a look. Decided as well to study some Jquery first, before I go a step further.

Link to post
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.

×