[Animating stop-color of linearGradient]

THank you!

[Animating stop-color of linearGradient]

Hi Guys,

if I remove the inline style and change stop-color to attribute the above from Carl doesn't work for me, the gradient becomes all black

See the Pen XWdKwqQ by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

Could you please advise

Thank you

[Planet Orbits (Linked animations)]

ok thank you Zach, I'll keep it in mind next time

[Planet Orbits (Linked animations)]

I've cheated!

 

Thank you for your support

[Planet Orbits (Linked animations)]

Thanks guys, 

I've achieved some kind of sync between the orbit rotation and planet anim but I can't understand how the progress() works...

it only gets the time of the orbit1_anim?

 

 

[Planet Orbits (Linked animations)]

Hi Guys, 

I'm trying to make this simple planet orbits animation but I finally hit the wall achieving this astronomical mess.

I know I need to somehow make the planet a child of the orbit animation but I'm not sure how.

 

Thank you in advance

Gp

See the Pen dybJeLe by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

[Hamburger menu with DrawSvg]

That's clear. Thank you both!

[Hamburger menu with DrawSvg]

Thank you Zach!

One question: Why did you add the label with addLabel()  (I didn't even know the existence of addLabel) and you didn't add it within the tween on line 9?

 

thanks again

 

[Hamburger menu with DrawSvg]

Hi Zach,

yes the states above are correct. I had in mind to lower the opacity or change colour of the X on hover but I didn't get that far yet

Thanks

[Hamburger menu with DrawSvg]

Hi Guys,

I'm trying to animate this hamburger menu. The hover works but only once and the click doesn't work so it's not a pretty picture

Basically on click I need to draw #x_right and #x_left to 100% to form the X to close the menu and draw all the rest of the paths to 0% 

What am I doing wrong?

Thank you!

See the Pen xxKdZyK by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

[MorphSVG .hover()]

Perfect! thank you!

Only thing is that the text is not aligned when the page is loading and then jumps into position

 

See the Pen pozeKMy by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

 

[MorphSVG .hover()]

Thank you pointC,

I've improved the svg and the animation now it's smoother.

Now I'm trying to make the text follows the animation on hover the but I'm stuck here.

I'm pretty sure the way I set the elements of the button it's a bit messy but not sure how to improve it

Shall I animate the position of the text or there's a better way to approach this?

 

See the Pen pozeKMy by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

Thank you!

[MorphSVG .hover()]

Hi Guys, 

Can't figure out why this doesn't work

Thanks

See the Pen qBWrEzq by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

[Is it possible to animate spritesheet through GSAP ?]

On 8/16/2019 at 7:30 PM, OSUblake said:

Are you seeing this on a HiDPI monitor, like a 4k, 5k, Retina, mobile, etc? It might be because you are using a background image, which doesn't adjust for the resolution of the display. 

Thank you @OSUblake, yes now it's much better with transform x

See the Pen yLBJYrB by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

On 8/17/2019 at 3:28 PM, mikel said:

I would have bet you would recommend a little canvas and three.js.

Thanks Mikel, I tried but I cannot replicate this with any 3d software so I didn't even try three.js. The first frame of the sprite is a logo, which at first glance seems a 2d shape until you hover it. The perspective is so distorted that I couldn't recreate it with 3d apps

[Is it possible to animate spritesheet through GSAP ?]

Hey guys, 

I was playing with this 

See the Pen yLBJYrB by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen

 

In some steps the svg looks like it's pixelated on chrome (I know, I have no idea how I managed to do that)

The animation is a bit clanky because I had to draw each individual step for the sprite.  Any advice on how to tackle this animation in a different/better way? Also, how performant is it this way? Am I going to break people's computers?

 

Thank you!

Jp

[Animate a handwritten signature]

Yesss! thank you guys. What a service! 

See the Pen oVqeLB by Jp_uk (@Jp_uk) on CodePen

 

[Animate a handwritten signature]

Hi Guys,

I've tried to do the same thing but I hit the wall.

This is where I'm at and I can't find out what's wrong 

See the Pen oVqeLB by Jp_uk (@Jp_uk) on CodePen

 

 

Thank you

 

 

[Animating svg drop shadow]

I'm using a led-backlit display with IPS technology (27"). I thought the poor perfomance was code related. If is because of the display then I'll just have to live with it. Thank you! 

[Animating svg drop shadow]

Hi Guys, 

the above work well on the codepen but on my site the animation is really jerky, in particular when you click the down arrow to scroll down to the section with the animate V. While the window is scrolling it stops for a moment and then carries on to the bottom. 

What could cause this?

Thank you

 

[Continuous animation performance]

Oh dear! oh dear! silly me.

Thanks Dipscom!

[Continuous animation performance]

Hi Guys, 

I'm working on an animation that has the same structure as this pen.

The effect I'm trying to achieve is Items flowing across the bottom right part of the screen at different speed.

I've got 2 questions: 

 

1) I can't understand why at the start of the animation the cats are sitting on the bottom of the container having given them a "top" of 100vh and they don't start from below that container.

2) I'm sure this is not a very performant way to animate this. Is there a better way to do it? Basically I don't care the order of the animations as long as they travel at 45degrees from bottom to the top right of the screen. Animations can occur randomly and they should be continuous.

 

Hope that's clear,

Thank you,

Jp

 

See the Pen JmgBKg by Jp_uk (@Jp_uk) on CodePen

[Animating svg drop shadow]

That's great! thank you for your help

 

[Animating svg drop shadow]

Hi guys,

I'm trying to animate this svg to give the effect as it lifted off the background. In this pen I tried to animate the scale and the drop shadow and the animation is triggered with scrollmagic. 

 

I have set the initial drop shadow in the CSS as advised by Dipscom here but the drop shadow doesn't animate.

 

What am I doing wrong?

 

If this effect can't be achieved this way is there another way to approach it?

 

thank you

 

See the Pen gByBvR by Jp_uk (@Jp_uk) on CodePen

[Animate background gradient on scroll]

It makes so much sense now. Thank you PointC! 

[Animate background gradient on scroll]

Hi Guys,

I have 4 fullscreen sections on a page (using fullpage.js). I'm trying to animate the background gradient of the body every time users scroll through each section. Animation duration should be tied to the scrollbar position. I have pre-set colors to use for each section that I have put into an array. 

 

My idea is to get the id of the section currently in view and pass this into the colorize function to get the corresponding colors for the gradient. I'm stuck here. 

 

Thanks in advance

See the Pen QVeQvP by Jp_uk (@Jp_uk) on CodePen