Hi GS Community,
I'm building a responsive ad. The first I've ever done before. It's been quite the rollercoaster, but I've hit a real surprising problem.
I'm trying to animate a DIV tag that has CSS transforms applied to it in the stylesheet:
<style>
#intro_p1 img{ position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); max-height:95%; }
</style>
<script type="text/javascript" src="_js/TweenMax.js"></script>
TweenLite.to(intro_p1, 1, {alpha: 1, y:"50"}, 'frame1')
It will alpha, but because these transforms are applied to it to make sure it stays stuc to the bottom of the screen regardless of size, when I try to applie GSAP using x/y it just disappears.
So now I'm a bit "AHHH!!!" cuz I need this thing done tomorrow and I have a lot of %transforms% to make it work responsively by design and now am scrambling to sort out workarounds becase GSAP isn't working and is really conflicting with what's styled.
Has anybody run into this, know why this is happening, and/or what I can/need to do?
If you take the above code and use any arbitrary image you should see what I mean. The alpha works but it can't understand GSAP when CSS transforms are applied. Sorry I don't have a github setup, but I'm in a rush.
Thanks for any suggestions anybody if you have them, appreciated!