anaelyts

hello Jack, wow, I'm really impressed by your comprehensive answer. This points me in new directions, leaving my intentional path. Having built a couple of css-keyframe anims in the last time, I'm more than happy how flexible the timeline in GSAP can be built and edited. I think the approach with the transforms comes from my workflow (building and editing Animations in Chrome DevTools with Inspector). Your hints will keep me busy for a while now. Much to try from here. What I understand, if I use GSAP correct, Responsiveness will be in the result. Great and many thanks!

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