replay timeline

[greykrav]

On 6/26/2019 at 8:05 PM, PointC said:

There isn't a timeline visualizer tool nor do I think there are plans for one in the future. See this thread:

If you really want to learn to write modularized code that's super easy to maintain and make quick changes, check out this post by the mighty @Carl that I mentioned above:

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening.

 

 

On 6/25/2019 at 4:17 PM, PointC said:

 

@Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts.

 

 

You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread.

 

On 6/25/2019 at 4:17 PM, PointC said:

 

@Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts.

 

 

You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread.

 

 

 

There are also loads of filters available to you.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

 

<feComponentTransfer> looks like it could be a lot of fun in your project.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer

 

Happy tweening.

 

 

 

Question Re the first two things you mentioned: 

In the first two lines I think the cashing problem has been fixed,

but the brightness tweak on line 99-106 is not behaving as I would expect:

 

See the Pen vqOLpJ?editors=0010 by kravmaguy (@kravmaguy) on CodePen

 

 

[PointC]

Your tween on line 99 has two sets of vars. I think you meant for that to be a .fromTo() tween rather than a .to() tween. The entire SVG also has its opacity set to 0 on line 34 of the CSS. 

 

If you fix those two problems, I think you'll be good to go.

 

Happy tweening.