luke.twomey
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by luke.twomey
-
-
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%' });
transformOrigin won't change registration point from top left corner
in Banner Animation
Posted
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:
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
banner.js
animations.js
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):
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:
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.