Jump to content
Search Community

Slow response on rollover

Mustana 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 am working on a site but when i gave rollover through js using tweenlite , its doesn't works smoothly 

 

middBttn0.addEventListener("mouseover", midNavHover);

middBttn0.addEventListener("mouseout", midNavOut);

 

function midNavHover(e)
{
console.log('hover');
TweenMax.to( document.getElementById('midBttn0'), 0.5, { backgroundColor:"#9fc73a" });
}
 
 
function midNavOut(e)
{
console.log('hout');
TweenMax.to( document.getElementById('midBttn0'), 3, { backgroundColor:"#e6e6e6"});
}

 

 

anyone please help me, the rollover is quite slow 

Link to comment
Share on other sites

Hi, can you describe how this is slow? Is the animation slow (performing) or is there a delay before the animation starts?

 

You could optimize a little by doing this:

 

middBttn0.addEventListener("mouseover", midNavHover);

middBttn0.addEventListener("mouseout", midNavOut);

 

function midNavHover(e)
{
console.log('hover');
TweenMax.to( middBttn0, 0.5, { backgroundColor:"#9fc73a" });
}
 
 
function midNavOut(e)
{
console.log('hout');
TweenMax.to( middBttn0, 3, { backgroundColor:"#e6e6e6"});
}
Link to comment
Share on other sites

It would be SUPER helpful to see a reduced test case codepen or jsfiddle. It's just so hard to troubleshoot blind. 

 

One mistake I've seen people make before when they complain about something like this is that they have a CSS transition applied to the property they're trying to tween, thus every time GSAP sets it (60 times per second), the CSS transition re-starts its transition and there's a funky delay which isn't a problem with GSAP at all. So make sure you don't have any CSS transitions or animations on that element that'd fight with GSAP. Other than that, I don't think we can be of much assistance without some kind of example that lets us see the problem in context. 

  • Like 5
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...