Problem with animation shaking when animated inside a animated element

[sbeaulieu-voyou]

Hi,

 

I am new with JS animation / TweenMax and we want to do a projet with horizontal scroll + parallax (sliding element) So far we are using TweenMax + ScrollMagic and the base is working but when we animate the "float" img inside the horizontal scroll as soon as both element are animated the floated img start shaking ... 

 

I am sure it's a really simple / easy issue to fix but I didn't found anything probably not using the right keyword to search this issue... 

 

Thank you for your time and support!

See the Pen qBYBmwB by sbeaulieu (@sbeaulieu) on CodePen

[GSAP Helper]

 

Hi there!

 

TweenMax is a very old version and ScrollMagic is not a GreenSock product, so support for it can not really be offered in this forum. GreenSock does have its very own plugin for scroll-related animation - ScrollTrigger. It can do what ScrollMagic does and a whole lot more - and the best thing is that you get support for it on here and that it is being actively maintained.

So my suggestion would be to update to GSAP3 and while you're at it, also have a look at how ScrollTrigger works. The article linked below should help you get started. As for the fake-horizontal scrolling that you appear to be attempting, you can find a couple of demos on the ScrollTrigger demo-pages as well as this and that collection over on codepen.

 

Give it a shot converting things to GSAP3 and ScrollTrigger and if you get stuck, we'll be happy to help.

 

 

 

 

 

[sbeaulieu-voyou]

Thank you! We will certainly update to GASP and look the codepen you send us!