Handling complex box shadow transitions

[PG1]

Hi, 

 

I have a chunky box shadow definition in my CSS. As the pens shows, it generates a light pulsing shadow, currently using css keyframes. I'm having timing / delay issues and would like to animate it in GSAP. 

 

My issue is that when I try to set this up, codepen is giving me an error "Uncaught SyntaxError: Unexpected number" - visible if you uncomment the JS. 

 

Any ideas what I'm doing wrong here?

See the Pen ff57c71d9a104e7fafe4ccc263420e47 by petegarvin1 (@petegarvin1) on CodePen

[GreenSock]

That's because you had invalid JavaScript. Not only did you forget to put your value inside quotation marks, but you had illegally nested parenthesis (well, you were missing closing ones). I assume this is more like what you meant to do, right?: 

See the Pen 0b95b97a777afcbbd716208b09e9dbc2?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[ZachSaucier]

Additionally to what Jack said, continually adding tweens to timeline that's completed is one of the most common GSAP mistakes. I assume you want something like this:

See the Pen zYBRgVb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice also that I am using a .fromTo() because browsers report the order of box-shadow differently so in order for the interpolation to work you need to be more explicit about the start and end values. 

 

Also note that animating box shadows like this is very performance intensive for rendering. It's not recommended to be doing this much, if at all  

[PG1]

7 hours ago, GreenSock said:

That's because you had invalid JavaScript. Not only did you forget to put your value inside quotation marks, but you had illegally nested parenthesis (well, you were missing closing ones). I assume this is more like what you meant to do, right?: 

 

 

 

 

Thanks - not great looking for gsap help and forgetting all the JS basics! worked a treat thanks

[PG1]

7 hours ago, ZachSaucier said:

Additionally to what Jack said, continually adding tweens to timeline that's completed is one of the most common GSAP mistakes. I assume you want something like this:

 

 

 

Notice also that I am using a .fromTo() because browsers report the order of box-shadow differently so in order for the interpolation to work you need to be more explicit about the start and end values. 

 

Also note that animating box shadows like this is very performance intensive for rendering. It's not recommended to be doing this much, if at all  

Interesting thanks, think I know what you mean about continually adding tweens, so hopefully have fixed. I try to stay away from fromTo since reading that common mistakes article but will watch out for good uses. 

In terms of performance, what would you recommend for this? Doesn't matter for the pen, but I'm interested

[PG1]

Final pen sorted and here if interested:

See the Pen ZEOrPjL by petegarvin1 (@petegarvin1) on CodePen

 

[akapowl]

 

That one is lit, as the kids say nowadays  

 

Good job @PG1

[PG1]

1 hour ago, akapowl said:

 

That one is lit, as the kids say nowadays  

 

Good job @PG1

Thanks, I'm actually having a couple of issues tweaking it - I'll mention here but let me know if better on a new thread...

The box shadow transition happens great on ignition, but the transition back to no box shadow doesn't happen (it just disappears) when you click to turn the button off. Might be because I'm setting it back to 'none'...

 

The tween in question happens at line 60 in the JS. It's animated in at line 29. 

 

Any ideas?

[ZachSaucier]

13 hours ago, PG1 said:

Final pen sorted and here if interested

Since you asked for performance recommendations, that pen is pretty janky on my relatively new Macbook Pro. Using something like canvas instead would help it perform much better.

 

46 minutes ago, PG1 said:

The box shadow transition happens great on ignition, but the transition back to no box shadow doesn't happen (it just disappears) when you click to turn the button off. Might be because I'm setting it back to 'none'.

When animating between complex strings, GSAP has to look for numbers in specific positions of the string to interpolate. This is why I used a .fromTo() - I make sure the start and end values have the same format. Adding support for every edge case where you go from a complex value like what you have to something equivalent to 'none' but with the same format as your complex string would be too much code for what it's worth. That's why we leave it up to you, the developer, to specify if necessary.