dcotto Posted May 19, 2021 Share Posted May 19, 2021 Hello, i am trying to change the keyframe animations color that is within '@keyframe colors' css code. if you look at my codepen.. you can see a snippet of the code i am trying to fix... bare with me if the code is not 100% accurate.. it might be a little pseudo... anyway. i am trying to target that keyframe animation called "@keyframe colors" and trying to change the property "color: #010101' to something else... using greensock how can i target that @keyframe colors" property color. thank you i am really in a bind and need help See the Pen MWpbQVv by doedoe-dumby (@doedoe-dumby) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 19, 2021 Share Posted May 19, 2021 This is definitely not the right way to go about things. I don't see any way that mixing GSAP and CSS like this is a good plan. Lets leave the code aside for a bit. Could you explain what you're trying to accomplish? Maybe we can help. 2 Link to comment Share on other sites More sharing options...
dcotto Posted May 19, 2021 Author Share Posted May 19, 2021 See the Pen eYvBMXa by doedoe-dumby (@doedoe-dumby) on CodePen Hello Cassie, please take a look at my codepen URL. i am not sure why the CSS3 keyframe animation is not working in codepn but lets imagine that it is.. CTA text color should start off as black and the hover color for CTA should be RED. The issue i am having is this, if you look in the JS panel in codepen you will see my TimelineMax animation... in there you will see that we are animating 4 images to appear after about 2 seconds between each other... after frame 4 (fr4) we want our cta and hover colors to change... frame 1, frame2 & frame3 should have cta text color black and hover color red.. but the last, frame 4, the colors should change and they should be CTA text color white and Hover color black. we need to animate this Also, in the future, we would need to change the CTA Text & CTA Hover colors for frame 1 or frame 2 or frame 3 etc. how would we interject them in the code as we have written there in the codepen within those comments Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 19, 2021 Solution Share Posted May 19, 2021 See the Pen 1dee3a3481e055175817d543954e9c4a by cassie-codes (@cassie-codes) on CodePen CSS variables will definitely solve the issue of wanting to change colors or hover colors! You should also look into using GSAP 3 You're using older syntax even though you're importing the new library. I'm not sure what you're trying to achieve overall as none of the linked pen is working - but I would hazard against mixing up CSS animation and GSAP, it can get messy. 1 1 Link to comment Share on other sites More sharing options...
dcotto Posted May 19, 2021 Author Share Posted May 19, 2021 hey cassie this was close, thank you for your response. but this doesnt change the hover color. Would you happen to know how to target the hover color?.. if we can do that then we have successfully completed our mission! Link to comment Share on other sites More sharing options...
dcotto Posted May 19, 2021 Author Share Posted May 19, 2021 i found the answer.. in the css i added: :root { --my-color: white; } then in the greensock animation i put this instead and it works tl .to ( ':root', { '--my-color': 'black'}) Link to comment Share on other sites More sharing options...
Cassie Posted May 19, 2021 Share Posted May 19, 2021 #cta { --color: black; --hover-color: black; color: var(--color); } #cta:hover { background-color: var(--hover-color) } var tl = gsap.timeline() tl .to ( '#cta', { '--color': 'purple', '--hover-color': 'green'}) .to ( '#cta', { '--color': 'green', '--hover-color': 'red' }) .to ( '#cta', { '--color': 'orange', '--hover-color': 'pink' }) Easiest way would be to duplicate the code I provided, CSS vars don't have to be declared on root. 1 1 Link to comment Share on other sites More sharing options...
dcotto Posted May 19, 2021 Author Share Posted May 19, 2021 thank you so much Cassie! You saved my day! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now