luke.twomey

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.

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%' });