on mouse over

[Guest]

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.

[Guest]

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.

[Carl]

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/

[Guest]

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