Jump to content
Search Community

transformOrigin won't change registration point from top left corner

luke.twomey 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

Perhaps someone can tell me what I'm doing wrong with the following code. I'm trying to scale an image from its center point, rather than its top left corner. The image scales from infinity to full size as expected, but I cannot get it to do this from its center point.

 

tween = TweenMax.fromTo(obj, animation.duration, { scaleX: 0, scaleY: 0, alpha: 1 }, { scaleX: 1, scaleY: 1, transformOrigin: '50% 50%' });

 

Link to comment
Share on other sites

Welcome to the forums,

 

transformOrigin for DOM elements is naturally in the center. As Oliver said, it really shouldn't need to be set in your case.

Here is a very simple demo showing scale of a single element. 

See the Pen PeqjJP by GreenSock (@GreenSock) on CodePen

 

 

You can hit run pen > edit on CodePen and create a fork that shows what your code is doing differently.

I'm sure once we see the problem we will be able to provide a solution.

  • Like 1
Link to comment
Share on other sites

Thanks for your replies. Unfortunately our project is a little too complicated for me to get the code into CodePen for you to view running.

 

Perhaps if I walk you through how we're doing things you might spot something obviously wrong...

 

We're using Webpack to pull in TimelineMax and TweenMax as external plugins:

 

new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'enabler',
          entry: 'https://s0.2mdn.net/ads/studio/Enabler.js',
          global: 'Enabler',
        },
        {
          module: 'timelinemax',
          entry: 'https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_1.20.0_d82c0635e1c062329eb780229648d97f_min.js',
          global: 'TimelineMax',
        },
        {
          module: 'tweenmax',
          entry: 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.20.0_d360d9a082ccc13b1a1a9b153f86b378_min.js',
          global: 'TweenMax',
        },
      ]
    }),

 

In our banner.js file we first run through the isPageLoaded, isVisible etc functions provided by DoubleClick Enabler, before preloading all of our images. We then create a new timeline, and loop through each one of the animations we've specified in a simple data.js file to create a tween for each one in our animations.js file:

 

data.js

animations: [
    {
      type: 'label',
      label: 'frame1',
      offset: ''
    },
    {
      id: 'logo',
      type: 'fade',
      method: 'in',
      origin: '',
      destination: '',
      duration: 1,
      label: 'frame1',
      offset: ''
    },
    {
      id: 'frame1_image_1',
      type: 'slide',
      method: 'in',
      origin: 'left',
      destination: '',
      duration: 0.5,
      label: 'frame1',
      offset: ''
    },

 

banner.js

buildTimeline() {

    data.animations.forEach((animation, i) => {
      
      if(animation.type === "label") {
        // If animation type is label, then this can be added directly to the timeline. No need to create a tween for it
        this.timeline.add(animation.label, animation.offset);
      } else {
        // If the type is not a label, then it's an element to be animated. Call tweenAnimation to create a tween to add to the timeline
        // Add it at the timeline position specified by the label and offset
        this.timeline.add(tweenAnimation(this.assets[animation.id], i, this.width, this.height), animation.label + animation.offset);  
      }
      

    });

    this.play();
  }

 

animations.js

case 'scale':

      // Work out if element needs to scale in, or scale out
      switch (animation.method) {

        case 'in':
          
          tween = TweenMax.fromTo(obj, animation.duration, { scaleX: 0, scaleY: 0, alpha: 1 }, { scaleX: 1, scaleY: 1, transformOrigin: '50% 50%' });
          break;

        case 'out':

          tween = TweenMax.to(obj, animation.duration, { scaleX: 0, scaleY: 0, transformOrigin: '50% 50%' });
          break;

      }

      break;

 

Our images all have alpha 0 applied to them when first loaded, so I've tried to simplify your example code as much as possible into the following (while still including alpha so I can actually see something happening):

 

tween = TweenLite.to(obj, 5, {scale:0, alpha:1});

 

However, when I use this code, only the alpha is animated. Nothing happens to the scale at all. It doesn't seem to like the shorter "Scale" as opposed to using ScaleX and ScaleY together. I'm not sure if this tells you anything useful.

 

When I use the following code:

 

tween = TweenLite.to(obj, 5, {scaleX:0, scaleY:0, alpha:1});

 

Scale does then work at the same time as alpha, but it scales down into the top left corner, and not the center point as I now understand from your replies should happen by default.

 

Not sure if you can tell anything from this more detailed explanation. If you need more info let me know. Thanks in advance.

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...