Two animations, one object

[Nikki Dean]

So, I have an search icon that rotates on hover.

If you click on the icon, the icon moves to the center of the screen and expands into a search bar.

 

Both of these work great. HOWEVER, when I hover over the newly created search bar, it rotates, which I do not want.

I am new at GSAP, so just looking for some advice.

 

How do I stop one timeline from playing inside of another timeline?

[Jonathan]

Hi @Nikki Dean and welcome to the GreenSock Forum!

 

Are you using a child timeline within a master timeline?

What do your tweens or timeline look like?

 

To better help you can you please create a reduced codepen demo example. This way we can test your code live to see what is happening in an editable environment. As well as understand what is visually happening.

 

 

Thanks and Happy Tweening!

 

 

[Nikki Dean]

I was actually able to fix this using this line of code in my 'click' EventListener function:

 

search.classList.toggle('js-x'); 

 

and adding this line of code to my 'mouseover' EventListener function:

 

  if(search.classList.contains('js-x')) {
    return;
  }

 

I'm not sure if this is the proper way to handle this, but it worked!

[Jonathan]

Hi @Nikki Dean

 

Your second codepen shows a 404.

 

There would be a number of ways to do this. But to just add to what you have without changing your code.

 

You can just add a class called active when you click the magnifying glass. And then remove the active class when you click the X to reverse. Then just add a CSS class to force the rotation back to 0 so any hover will not be applied.

 

See the Pen rPVxMY by jonathan (@jonathan) on CodePen

 

JS I modified:
 

search.addEventListener('click', function(){
  search.classList.add("active"); // added this to add .active class
  toggleSearch.play();  
})

searchExit.addEventListener('click', function(){
  search.classList.remove("active"); // added this to remove .active class
  toggleSearch.reverse();  
})

 

The CSS I modified:
 

/* force transform rotate to 0 */
.search.active {
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0) !important;
  transform: matrix(1, 0, 0, 1, 0, 0) !important;
}

 

There are other ways to modify the way your doing the hover,  I'm but glad you got it fixed.

 

Happy Tweening