Jump to content
Search Community

semplicelabs

Business

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by semplicelabs

    Possible Bug with rem values like 3.100rem

    in GSAP

    Posted

    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

    See the Pen poEvRwR by paperboy (@paperboy) on CodePen

    StartTrigger differs on elements with pre-defined css vs gsap.set() (css transform)

    in GSAP

    Posted

    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! :)

    See the Pen bGeXjor by paperboy (@paperboy) on CodePen

    Combining linear gradient + url on css background image

    in GSAP

    Posted

    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

    Combining linear gradient + url on css background image

    in GSAP

    Posted

    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

    See the Pen vYKXRaM by paperboy (@paperboy) on CodePen

    Animating skew (x+y) also adds rotation and scale (result differs from css)

    in GSAP

    Posted

    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

×
×
  • Create New...