Jakob3

Hi Blake, Thank you for taking a look. Removing scaleY does remov the jitter. Thank you, I'll try to find a workaround.

Hey! I've created a blob animation that get's minimized and transformed into a circle on a scrolltrigger event and on return it gets back into the previous state and resume the animation. This all works well, but I've noticed that in Firefox initially animation is smooth. But after minimizing and then returning into previous state (after scrolling down and then back up) it will become very jittery, as if it were jumping frames or running at lower FPS. Do you perhaps have any idea why this is happening? In Chrome it's running smoothly in all cases. Here's a codepen with a barebones example: https://codepen.io/jakobpevec/pen/JjMLgPR I'd be most grateful for any hints Best regards, Jakob

Hello Blake, Thank you for taking a look. Tried all of the above but the only way to avoid this was to animate a div wrapper around svg. Would perhaps this animation be better suited for canvas instead of svg? Many thanks

I've tried it and I also can't reproduce it there. Probably because it re-builds the code when refreshing/running code, it doesn't behave the same as regular page refresh? I attached a very slim example that reproduces this issue, I hope this is allowed To install just run npm install and then npm run dev demo.zip

Hey! Thanks for pointing me in that direction I did one more test and put the SVG in a div wrapper and animated that div in same way. In this case the issue is not happening. Perhaps it does have something to do with gsap? I'd create a codepen demo but this issue is not possible to recreate there, I tried.

Maybe an important info is that I'm using SvelteKit. On mounting I do a scrolltrigger.refresh and on destroy as well. Here is a video of the behavior (first scroll is correct, after refresh is incorrect): If I console.log the SVG path's bounding box it's like this: - On a normal load it will get correct dimensions and position DOMRect {x: 972.82568359375, y: 230.93328857421875, width: 750.803955078125, height: 586.3333129882812, top: 230.93328857421875, …} - If I scroll up and down while reloading or sometimes if I reload in the middle of the page it will get positions and size as 0 DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}

Hey! I only recently started experimenting with gsap and so far i really love it. I'm making a website with scrolltrigger animations, basically a svg path that is 100% height and width with position fixed and it's being animated on scroll (background effect). I have 4 sections and each section will trigger a transition animation. On initial page load, the animation plays out well. But, If I refresh the page somewhere in the middle it will sometime load correctly and other times it will mess up positioning (instead of going 200px right it goes completely off screen). Any idea what could be the issue? Am I not using scroll trigger correctly? //SVG's path that's being animated <svg height="100%" width="100%" viewBox="0 0 1000 700" preserveAspectRatio="none" class="{className} {blobClass}" > <path height="100%" width="100%" d="" fill="#eff0fd" /> </svg> //Callback to function that loops a svg animation let tl = gsap.timeline({ onUpdate: function () { animate(); }, repeat: -1 }); //animate transition to section 2 let blobTl02 = gsap.timeline({ scrollTrigger: { trigger: '.section-02', start: 'top bottom', scrub: 1.5, end: 'bottom bottom' // markers: true }, onComplete: function () { tl.pause(); }, onReverseComplete: function () { tl.play(); } }); blobTl02.set(`.${blobClass} path`, { transformOrigin: 'center center' }); blobTl02.to( `.${blobClass} path`, { // scale: '5', // translateX: '-200px', translateY: '-350px', ease: 'Power1.inOut' }, 'transition' ); blobTl02.to( `.${blobClass} path`, { scale: '6.5', fill: '#faf9ff', ease: 'Power1.inOut', delay: '0.1' }, 'transition' ); //Animate to section 3 let blobTl03 = gsap.timeline({ scrollTrigger: { trigger: '.section-03', start: 'top bottom', scrub: 1.5, end: 'bottom bottom' // markers: true }, onComplete: function () { tl.play(); }, onReverseComplete: function () { tl.pause(); } }); blobTl03 .to( `.${blobClass} path`, { // scale: '5', // translateX: '-200px', translateY: 50, translateX: -430, ease: 'Power1.inOut' }, 'transition' ) .to( `.${blobClass} path`, { scale: 1, fill: '#faf9ff', ease: 'Power1.inOut', delay: '0.1' }, 'transition' ); //Animate to section 4 let blobTl04 = gsap.timeline({ scrollTrigger: { trigger: '.section-04', start: 'top bottom', scrub: 1.5, end: 'bottom bottom' // markers: true }, onComplete: function () { tl.pause(); }, onReverseComplete: function () { tl.play(); } }); blobTl04 .to( `.${blobClass} path`, { scale: 5.5, fill: '#faf9ff', ease: 'Power1.inOut', delay: '0.1' }, 'transition' );