Jump to content
Search Community

infinite rotation

Meds86 test
Moderator Tag

Go to solution Solved by Carl,

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

  • 4 years later...

I have the same issue, but I can't remove the css transition to solve the problem. I used a tag <img> to upload svg files and in order to change the svg color I used the property "filter". Is there any another way to solve this?

Link to comment
Share on other sites

2 hours ago, Mikemcfly said:

I have the same issue, but I can't remove the css transition to solve the problem. I used a tag <img> to upload svg files and in order to change the svg color I used the property "filter". Is there any another way to solve this?

It would really help to have a minimal demo to look at, @Mikemcfly. If you're asking if you can have GSAP control the rotation of an element AND ALSO have a CSS transition controlling it, no, that should definitely be avoided and it's a logical impossibility. That being said, you could certainly nest it in a <div> that's being controlled by one, and the inner element is controlled by another. But I'm still rather confused about why you think you'd need both a CSS transition and a GSAP animation on the same element. Once we see that minimal demo, I'm sure it'll become more clear. 

 

Happy tweening!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

12 hours ago, GreenSock said:

It would really help to have a minimal demo to look at, @Mikemcfly. If you're asking if you can have GSAP control the rotation of an element AND ALSO have a CSS transition controlling it, no, that should definitely be avoided and it's a logical impossibility. That being said, you could certainly nest it in a <div> that's being controlled by one, and the inner element is controlled by another. But I'm still rather confused about why you think you'd need both a CSS transition and a GSAP animation on the same element. Once we see that minimal demo, I'm sure it'll become more clear. 

 

Happy tweening!

Hi Oracle, @GreenSock

 

That's my bad, sorry! and thank you for the minimal demo, I watched it. Well, I just would like to say that I am new on this field. A few months ago I started learning html, css and javascript through the internet by my own. It was yesterday that I found out about GreenSock and I became one of your disciples, you guys are awesome!

 

Ok. here is the thing. I am using css transition:hover. The files are SVG, but they are in a tag <img> at html, then I use filter to be able to change their color because fill will not work.

 

At the beggining the gear will rotate back but after few seconds it will spin normally, if this happen, please run the project again at codepen.

 

See the Pen KKWdJXb by mayconcabral (@mayconcabral) on CodePen

 

Link to comment
Share on other sites

That's fine, you just can't use all as the property.

 

.icon{
    filter: invert(89%) sepia(54%) saturate(4856%) hue-rotate(314deg) brightness(109%) contrast(90%);
    width: 60px;
    height: 60px;
    margin: 25px 0; 
    transition: filter 0.5s ease;     
}
.icon:hover{
    filter: invert(87%) sepia(94%) saturate(1270%) hue-rotate(304deg) brightness(122%) contrast(92%); 
    transition: filter 0.5s ease;
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

22 hours ago, OSUblake said:

That's fine, you just can't use all as the property.

 


.icon{
    filter: invert(89%) sepia(54%) saturate(4856%) hue-rotate(314deg) brightness(109%) contrast(90%);
    width: 60px;
    height: 60px;
    margin: 25px 0; 
    transition: filter 0.5s ease;     
}
.icon:hover{
    filter: invert(87%) sepia(94%) saturate(1270%) hue-rotate(304deg) brightness(122%) contrast(92%); 
    transition: filter 0.5s ease;
}

 

 

AWESOME! IT WORKED! THANK U!

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