hello GreenSock forum,
I'm having problems when positioning 2 pictures in a timeline making them aligned to each other. It works all fine from images 1 to 5 using tl.to with transforms. For picture _6 this only worked for a specific screen-resolution. It floats off when changing the screen-size. Applying a css-transform "perspective(75px) scale(.7) rotateY(6deg) translate(-51%,-7%) rotate(6deg)" and transition value to this one in css keeps it aligned.
So I was trying to follow part of Jack's advice in the post prevent-gsap-from-transforming-my-transforms-into-matrix which I understood it would bake a pure css-transformation into the timeline without the matrix() transformations:
tl_.to("._7", 1, {opacity: .5, onComplete:function() {
$('._6')[0].style.transform = "perspective(75px) scale(.7) rotateY(6deg) translate(-51%,-7%) rotate(6deg)"}}, "=+2");
this code aims at starting the transformation (onComplete function), after img _7 gets faded halfway in...
when it comes to the result, looks like img _6 already appears transformed at the start of the tween. In the codepen img_6 should show without transformations at around 18 sec and start them when img _7 gets blended in (around 22 sec).
https://codepen.io/anaelyts/pen/oNBPpBG?editors=1010
The effect can be seen, when inspecting element _6 and switching transform on and off at around 25sec. Is this a syntax issue or am I running into wrong direction?
Thanks for your advice
regards mario