Search the Community
Showing results for tags 'css variables'.
Found 5 results
-
Hi y'all, I'm trying to animate something by using the value stored inside a CSS variable as a value of the `height` property in `GSAP.to`. I'm aware that you can reassign value to CSS variables as part of a GSAP animation (not sure the correct term for that, just seen it in a few posts). Please see my minimal example in the CodePen. The square/rectangle is my attempt at using the variable as a value, and as you can see no animation occurs. The circle is using plain pixels animation, which works as expected. I'm currently using the latest Chrome browser, on MacOS Catalina. Thanks in advance!
-
When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); } JavaScript gsap.to("html", {"--myColor": "orange", duration: 1, yoyo: true, repeat: 20}); Demo Support for CSS variables was added in GSAP 1.20.0 -
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Here are some of the highlights of the GSAP 1.20.0 release... yoyoEase Now you can specify an ease for the yoyo (backwards) portion of a repeating TweenMax animation. Set it to a specific ease like yoyoEase:Power2.easeOut or to flip the existing ease, use the shortcut yoyoEase:true. TweenMax is smart enough to automatically set yoyo:true if you define a yoyoEase, so there's less code for you to write. Score! Animate CSS Variables (custom properties) See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen. Emoji support in TextPlugin 'Nuf said. ...and more There are quite a few little improvements and bug fixes as well, which are listed in the changelog at the github repository. Download GSAP today. Happy tweening! -
Just want to say that I've posted the same question on StackOverflow, but figured I would post it here too I'm really into Google's Polymer and I love GSAP - and so far I've been using the two in conjunction without a hitch. Unfortunately I have now hit a problem - how do I use GSAP (TweenMax to be specific) with custom css variables? For example: To change someCssProperty of someElement I would TweenMax.to(someElement, 1, someCssProperty: "value"); but the someCssProperty part becomes an issue when I'm trying to animate a css variable, which take on the form --some-custom-css-variable I have tried to use TweenMax.to(someElement, 1, --some-custom-css-Property: "value"); (obviously gives me errors) and I also tried to use TweenMax.to(someElement, 1, "--some-custom-css-Property": "value"); (quotes around the some-custom-Css-property) - however this results in no change/animation and an invalid tween value error message on the developer console. So the question is: how would I go about animating custom css variables with TweenMax (GSAP)? Thanks for any help EDIT: I have tried using classes through TweenMax.to("SomeElement", 5, {className:"class2"}); But this changed the element style as if I had declared it in css with a SomeElement:hover {} style (as in it does not animate, just changes immediately)
-
i attempted to upgrade gsap version at work and implement a tween of some css variables and immediately found an problem in chrome version 49 which i have personally already bumped into, and not sure what other browsers this could also branch to. to be clear, this is a problem in chrome, but the workaround is easy enough you might want to incorporate it into gsap. in chrome 49 when calling `setProperty` on a css variable that is already declared, rather than replacing the old value, it is added to the element. so throughout the course of a tween, a css variable is then defined on an element many times, which the latest one is always the overriding winner, but there seems to be some performance hits associated with this as well as timing effected. teh known workaround is to call `removeProperty` before calling `setProperty` again. go ahead and try out the jsfiddle in chrome 49 and watch the inspected markup as you click around.
