semplicelabs

Hi Jack, works perfeclty now, thanks a lot for the fix, you guys are amazing! Best, mike

Hi Team Greensock, Not sure if this is a bug but once i use values like 3.100rem or 3.1000rem with gsap.set it looks like it makes big values (maybe 3.1 to 31, it gets bigger with every zero) out of it. We use a system that will always use 4 digits after the comma (with toFixed) so sometimes you have a value like 3.500 instead of just 3.5 which leads to problems. This only happens with gsap.set but not with css. (see the codepen) Thanks a lot in advance! Best, mike

Hi @mikel thanks a lot for your help! It's always nice to have 2 options. I think i will go with the wrapper option! Thanks again! Best, mike

Hi everyone In my codepen you can see that the start trigger of an element will be different if you set your initial values in css compared to setting them via gsap.set(). (using css transform) Normally i would completely ignore this but in my single page app i have to set the initial values via CSS otherwise i will get a content jump because the content is already visible when gsap.set() gets used. What i bascially want is the behavior of the second pin (it perfectly ends on top and it looks like the css transform "start" scale gets ignored for the start trigger) but with initial values set in css. We made the switch from scrollMagic to scrollTrigger which went great so far and there are only a few small issues left like this. (in scrollMagic it always behaved like version 2) I hope we just overlooked something obvious like the last time. Summarize: I want GSAP to not account for the transform properties set via CSS when calculating the start position Thanks a lot in advance for any help!

Hi Zach, thank you for the fast answer. Sorry that was my bad, on my local install iam using scrollTrigger with a timeline and i had an syntax error in the initial value for the backgroundImage which gets created programmatically. I should have payed attention to the example codepen. At least it works great now, sorry again for the waste of time! Best, mike

Hi Team GreenSock, i hope i don't missed it anywhere but is it possible to combine both a linear gradient and a url on a background image? So many great effects would be possible (especially if you pin+reveal a cover image with a gradient for example). A normal linear gradient on the 'backgroundImage' works great with GSAP but i can't achieve it together with an image url like this: gsap.to('.cover',{ backgroundImage: 'linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(236,221,180,1) 100%), url(https://i.ibb.co/XCKK68q/codepen.jpg)' }); Iam also open to any tricks on how to achieve it even when its not build in natively. Only thing i have to avoid is to use 2 different elements. Thanks a lot for any help! Best, mike

Damn this was so fast guys. Thanks a lot! I think it was so confusing because all other attributes we animated (translate, scale etc.) worked fine. But anyways its perfect now and we will try to always set the values in gsap instead of CSS! Thank you all! Best, mike

Hi Team GreenSock! At the moment we have a problem when animating skew with GSAPv3. When we just try to animate skew (x+y) from 20deg to 0 it will end up being distorted and rotated instead of getting back to its initial state with skewx and skewy at 0. Ive already searched through the forums and found out about the "compensated" and "simple" skewTypes but that not really helped in my case. I also have to mention it only happens when we add skewY to the animation, skewX alone works fine. Ive made a fiddle (i hope a fiddle link is also ok) with both the GSAP and the CSS animation so showcase the difference. Would be great if someone has some hints on how we can get the result to look like the css animation. Please don't be mad if i missed something totally obvious. Thank you in advance! Fiddle: http://jsfiddle.net/chickberger/uvof5jx6/13/ Best, mike