Leaderboard

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

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!

Yeah I was really curious too, and most likely not GSAP related as you assumed. Thanks for such a great library!

I'm glad it seems to have been resolved now, though I'm very curious about exactly why. I suspect something else is at play. I kinda doubt it's GSAP-related though. Oh well - let us know if you need anything else. Happy tweening!

Hi @GreenSock, Super. Thank you very much. I really appreciate your effort - it was not coded in a minute. I try to understand each step. Was a little confused by 't' (= target?). And then I added this: TweenMax.set(t, {background: customerColor[i]}); Best regards Mikel

Welcome to the forums, @mikey123555. Sorry to hear about the trouble. It's virtually impossible for us to troubleshoot this blind unfortunately. Is there any way you could provide a reduced test case in codepen? We don't need (or want) the whole complex original project - perhaps you could just put together a few simple elements (boxes/divs) that deliver a similar effect? It's just too hard to guess at what's happening without being able to inspect things in the browser, analyze the code in context, etc. Have you tried doing a fromTo() tween instead of a set().to()? Are you using the latest version of GSAP? Does the same thing happen in all browsers or just one? Did you set a perspective on the parent so that z-positioning gets rendered?

Here's a fork, @mikel: That's probably how I'd do it. Of course there are a bunch of other ways too. Let me know if you have any questions/comments.

Fantastic, love to hear that @UnioninDesign. I hope your project goes smoothly, and thanks for your willingness to share solutions (eventually). I didn't quite understand what you were asking here, @mikel. Can you elaborate a bit? How can I help? Are you looking for a way to dynamically create <line> elements with their x1/y1/x2/y2 attributes populated from an array of data?

Added changes to CodePen, now works as expected! Thank you

Still needed in 2019 to get things (smoothly) running in IE11 ! Thank you for this discovery / bugfix.

Yes indeed. You can already do that by defining any valid css string as the "transform" like this: //define normal css values for "transform", like a matrix() or matrix3d() or something like "translateX(50px) rotate(30deg)" TweenLite.to($obj, .5, {css:{transform:"matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 32, -32)"}, ease:Power2.easeOut}); So to be clear, let's say you've got a css rule like this: .rotated { -webkit-transform: translateX(50px) rotate(30deg); -ms-transform: translateX(50px) rotate(30deg); -moz-transform: translateX(50px) rotate(30deg); -o-transform: translateX(50px) rotate(30deg); transform: translateX(50px) rotate(30deg); } You could accomplish the same thing like this with TweenLite.set(): TweenLite.set($obj, {css:{transform:"translateX(50px) rotate(30deg)"}}); And of course you could animate to those values over 2 seconds like this: TweenLite.to($obj, 2, {css:{transform:"translateX(50px) rotate(30deg)"}}); TweenLite will automatically handle the browser prefix(es) for you. Happy?