Help!! GSAP conflicts w/ CSS Transforms for Responsive Ad

[soupking]

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!

 

 

 

 

[Dipscom]

Hi soupking,
 
Unfortunately, just a snippet of code is not enough for us to help you. If you could create a reduced case of what you experiencing, we would be able to troubleshoot. Without being able to see/reproduce what is going wrong, we are all shooting in the dark. Here is a little explanation from Carl on how to create a reduced case in CodePen.

 

It is very unlikely that the issue is with GSAP, it works just fine -

See the Pen MyWNRN by dipscom (@dipscom) on CodePen

. 

 

More often than not, it will be an issue with your setup - hence why it is best to have something we can debug. 

[soupking]

Hi Dipscom,

 

Thanks for the response. I know, my post was a bit hit and run. I wish I could break things down swiftly but can't. Was just curious if somebody's run into this.

 

What I have is more involved. That pen is great, thank you. but imagine the square has to zoom in and scale (width-wise) with the entire stage. Again, sorry I can't post anything, no time. 

 

Just wanted to see if this is conflict of approach was something anybody's run into.

 

Thanks again for the response.

 

Best,

-soup

 

 

[Dipscom]

That's understandable if you are in a hurry, it is just that we can't do much ourselves to help out in a situation like this.

 

In theory, it should work. I do make a fair deal of absolute positioned and responsive bits to be able say with confidence that it would not be GSAP breaking.

 

If you are still struggling with it, check your CSS rules and double check. See if there is no conflict anywhere. Also, make sure there are no conflicts between the CSS transitions and GSAP - For example, sometimes we get people animating with CSS transforms as well as GSAP.

 

See the Pen mPyVKw by dipscom (@dipscom) on CodePen

. This one the box width is percentage-based. See if that helps.

 

Now, here's the gotcha: inspect the box element in the first pen I showed and you will see that GSAP adds a inline style rule: transform: translate(0%, 100%) matrix(1, 0, 0, 1, -282, 0);

 

You will see that there is a percentage-based translate and a unit-less matrix. If you want to be able to resize the window and have the box stay in the middle, you need to take the inline matrix into consideration and do something about it.

 

I, personally, would use clearProps and make sure the animation runs .from() somewhere else, to somewhere. And, at the end of the Tween, clear the props.

 

Maybe that would help?

Edited February 29, 2016 by Dipscom

[Carl]

dipscom, is exactly right. Seeing the code work in an environment where we can edit it is really the only way we can figure out what the issue might be.

It only takes about a minute to put the code you provided in a CodePen.

 

Please see here:

http://codepen.io/GreenSock/pen/aNzdPv

 

Unfortunately it doesn't appear to be acting strangely or perhaps I'm not understanding the issue.

Hopefully the pen I provided helps you add some more code so that the issue can be replicated.

I understand you have a deadline, we'll do our best to help if we can.

[Carl]

oops! I totally missed that Dipscom already did a CodePen.

I shall beg forgiveness.

[soupking]

Also, make sure there are no conflicts between the CSS transitions and GSAP - For example, sometimes we get people animating with CSS transforms as well as GSAP.

 

I think that's the problem. GSAP doesn't have any responsive x/y issues with any of the CSS other than the...

 

-webkit-transform: translate(-50%, 0%);

-ms-transform: translate(-50%, 0%);

transform: translate(-50%, 0%);

 

...portion.

 

For a number of slides combining transforms like this against GSAP tweening is like mixing fish with ice cream. Just fails. I've had some more time to look at it and I'm hoping now that my GSAP has thrown the CSS out of whack that I can hopefully re-position it using GSAP and just keep things 'DOM savvy' by keep the elements responsively relative to the DIV they're in.

 

Thanks again for the help.

[Dipscom]

Maybe what you need is xPercent and yPercent, instead of x and y.

 

In the docs, there's a bit of an explanation about the difference between the two and a couple of examples. It is under the 2D transformations section.

 

Have a look here:

http://greensock.com/gsap-1-13-1

Edited February 29, 2016 by Dipscom

[soupking]

Hey Dipscom,

 

That xPercent/yPercent thing looks really cool. My project's too far in one direction to use it, but I'll definitely think about it for future ones. Very helpful, thanks!

 

I actually found a workaround for my situation, it's not ideal, but it'll get the job done. I'd try and share what I did to fix it but it would require quite a lot of backlog and explaining it would probably confuse more than aide anybody.

 

Awesome though, thanks again.