errrrs

Hey thanks for getting back to me, I actually figured out a way to do it by tweening the first 30 frames on load in one render, and then having the scroll-linked animation take over after that starting at 30th frame in another render.

Any chance someone can show how you could play a part of the image sequence on page load? So for example, in the Airpod example, once the page loaded it would autoplay the first 10-15 frames? https://codepen.io/j-v-w/pen/ZEbGzyv

Jack, thanks again. I'm just a bone head and was having trouble implementing snap. I was misunderstanding how it worked. I got it working now like so --- Im using this with SWUP to create page transitions. Page Transition out -> tl.fromTo("#bigturbulence feTurbulence", 1, { attr: { baseFrequency:0, numOctaves: 0 }},{ attr: { baseFrequency: 0.005, numOctaves: 4 }, snap: { numOctaves: 1 }}), Page Transition In -> tl.fromTo("#bigturbulence feTurbulence", 1, { attr: { baseFrequency: 0.005, numOctaves: 4 }},{ attr: { baseFrequency: 0, numOctaves: 0 }, snap: { numOctaves: 1 }}),

Hi Jack, Thanks for the reply. Yeah I was pretty sure how I got to where I did was wrong. I am basically trying to tween between 0 and 4 on the numOctaves attribute. It was working before but throwing errors like Expected integer, "2.5664". - about 30 errors on each tween. I am trying to animate a SVG filter on page transition. For whatever reason, baseFrequency doesnt throw errors, just numOctaves.

Thanks Zach! I was able to get the errors to stop using snap, although I feel like the way I got there was probably a little wonky. let numOctOut = gsap.utils.snap(.25, 4); tl.fromTo("#bigturbulence feTurbulence", 1, { attr: { baseFrequency: 0.005, numOctaves: numOctOut }},{ attr: { baseFrequency: 0, numOctaves: numOctOut }}), I think I just dont understand the snap syntax all the way but this works and the errors have stopped. Thanks again.

Hi Craig, I noticed when using this we get the error "Error: <feTurbulence> attribute numOctaves: Expected integer, "2.5664"." I was wondering if any one has any ideas hot to avoid getting these errors. It just seems to not like the "numOctaves" attribute but works fine. Thanks for any ideas!