Tween with read only property ?

[duderion]

hi GSAP Guys, 

 

i'm having a strange problem, and i don't know why it happens.

 

my code is pretty straightforward 

 

jQuery("#rakete, .rocketbutton a").click(function(e) {
		e.preventDefault();
		leftValue = '50%';
		if ($window.width() < 600) {
			var leftValue = '0';
		}
 		TweenLite.to($rakete, 1, { y: -$window.height()-100 });
		TweenLite.to($slidein, 1, { x: "-100%", ease: Bounce.easeOut});
		$slidein.addClass('slipped-out');	
	})

 

and i receive

 

TweenLite.min.js:12 Uncaught TypeError: Cannot assign to read only property 'y' of object '#<HTMLImageElement>'
    at Object.i.render (TweenLite.min.js:12)
    at Object.i.render (TweenLite.min.js:12)
    at Object.E._updateRoot.H.render (TweenLite.min.js:12)
    at Object.i.dispatchEvent (TweenLite.min.js:12)
    at s (TweenLite.min.js:12)

 

i somehow cannot tween along x and y axis. 

They are readonly for the discovered HTMLImageElement

 

see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

 

I guess there is an easy solution, but i don't see it

 

Cheers

Adrian

[Carl]

Hi and welcome to the GreenSock forums.

 

It sounds like you aren't loading CSSPlugin (included in TweenMax).

If you want to tween css transforms like x,y,skewY, skewX etc, you need to have CSSPlugin present because images do not have x and y properties that can be tweened.

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js

 

Check out the Getting Started article: https://greensock.com/get-started-js or docs: https://greensock.com/docs/Plugins/CSSPlugin for more info

 

[duderion]

Hi Carl,

 

thanks alot for the quick reply. It helped me a lot. The CSS Plugin was indeed missing.

 

Cheers

Adrian