Jump to content
Search Community

Transformed Element Jumps to Side When Tweened

pauljohnknight test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi

I have a tween on a transformed span that i can't get to work properly.  I need to change the transformOrigin, but because the parent element is rotated 270deg it's created a bit of an issue (codepen link attached).

 

I've commented out a line on the timeline, which shows how I would like the animation to fade out, but having it so the line scales up from the bottom causes it to jump out of position.

 

Is there a solution under the current HTML layout, or is the fact I'm using spans (with inline-block added) part of the problem?  I've tried a number of different things but none of them seem to work.

 

Kind regards,

 

Paul.

See the Pen XaXqNa by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

Hello @pauljohnknight and Welcome to the GreenSock Forum!

 

Sorry your having this issue ;)

 

This is happening due to the way you have your positional offsets (top, right, bottom, left .. and the use of position absolute with no relative) for your span elements and their parent <div>'s. Even before you start animating.. as a rule of thumb and to enforce cross browser layouts. It's best to always remember to have your parent element have position relative which acts like a main stage anchor point for any children that are position absolute, like your span tags. Without using position relative the browser has no way to know what parent are the absolutely positioned elements positioned relative to, this is very important. Otherwise you will get crazy positional layouts when introducing CSS transforms which will make things worse if the proper foundation of CSS position isn't there.


Once you have your elements layout properly using position relative and absolute, then you know the underlying HTML and CSS layout will be positioned the same cross browser. Then you can start animating the elements ;)

 

Do you mean something like this?

 

See the Pen KvzzRR by jonathan (@jonathan) on CodePen

 

What i did:

  • first i make sure the #wrapper is filling up the entire viewport, since by default height is not inherited and is default auto. This has to be done in either two ways. Either make the root and body element have height 100% or you must use viewport units for the #wrapper to make the height stretch to fit. As well as adding position: relative, very important ;)
  • give your absolutely positioned elements parent, which in this case is .leftblock have a defined width and height which is the same as its children so the browser knows what your bounding box is for that element and its children.
  • for the CSS rule .leftblock span i comment out your transform rotate and let GSAP set() that rotation. And gave .leftblock span a defined height (even though when rotated it looks like its the width)
  • I used the position parameter (see below youtube video) in your to() tween to offset the tween by a relative negative 100th of a second ("-=0.1")
  • removed CSS property bottom from span#digital and placed on it's parent .leftblock
  • I removed DIGITAL DESIGN text and from span#digital and placed it in a new <span> called span#digital-text that will also get rotated. (this is so when span.underline1 is animated it does not cause bad blurry anti-alias webkit bug)
  • after that you notice that it doesn't shift to render your text on each line animation

 

 

Resources:

CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

Happy Tweening! :)

  • Like 6
Link to comment
Share on other sites

Hi Jonathan,

 

Thanks for such a great, detailed answer.  I understand what you mean so I'll have to make some changes.  The animation I was after is different to your example, but that's due to the fact I didn't explain that part very well, but I understand what you're saying and why the problem is happening which is really helpful.

Thanks again for the explanation it was excellent.

Paul.

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...