Jump to content
Search Community

ItsSuperEffective

Members
  • Posts

    2
  • Joined

  • Last visited

ItsSuperEffective's Achievements

3

Reputation

  1. Hello friends! I've been using GSAP for years since the good ol flash days for Online Advertisements, and have continued to keep using the latest CDN libraries as it gets updated on the Google JS Hosted Libraries provided here: https://support.google.com/richmedia/answer/6307288?hl=en For the longest time I used tweenmax_2.0.1_min.js, which is obviously outdated, and when I updated to the newer gsap_3.5.1_min.js I noticed that the className property doesn't seem to tween correctly as it did before. https://codepen.io/ItsSuperEffective/pen/ExNmgxx In my CodePen I am using className to swap between a couple classes to transition the numbers used in the css rule "clip:rect()". Yes, yes, I know clip rect is deprecated, but my employers client's often ask for browser compatibility with older browsers. Using TweenMax 2.0.1 You'll see the Red Box wipes away, then the blue box wipes in it's place. but with gsap 3.5.1, the class name changes, but it does not tween the values at all. The point is, it used to work, and now it doesn't. I know, I COULD just put "clip:'rect()" as a property right into JS (and this does work), but I am trying to keep my CSS values in my CSS, and my JS strictly animation as a practice. Now, I did some digging, and saw that the syntax has changed somewhat for timeline so I tried applying it, but came to the same problem. https://codepen.io/ItsSuperEffective/pen/xxRdEdO Any guidance will be appreciated.
  2. Posting because I found a solution that worked for me (and to also remind myself if I run into this in the future) In my case, I was given some banners developed by someone else and they were using embedded HTML SVG's which had DUPLICATE style PROPERTY within a few instances of <svg> tags. The solution was to merge the css styles into 1 property, see screenshots. That should make it work, I HIGHLY RECOMMEND that moving forward to run all banners through the GDC HTML5 Validator which would fire off an error if there are leftover problems. https://h5validator.appspot.com/ Best of luck!
×
×
  • Create New...