jramke

Thanks, for the quick reply. That really works. Thanks!

Hey, i created a horizontal scroll section with scrolltrigger back when 3.11.3 was the most recent gsap version. Now im rebuilding this section with gsap 3.12.3, but i noticed, when i refresh the page and the scrollposition was not at the top of the page the animation breaks. When downgrading gsap to 3.12.2 it works fine. It would be great if someone has an idea why its happening and/or can provide a working solution with the newest gsap version. Thanks in advance. Joost

Sorry for late reply, but this simple wrapper change really made it work, thanks so much!!!

Hey thanks for your answer. Yes that was a lot of code, my bad. I simplified my codepen from above and i also forked your codepen and added the clippath to the image. https://codepen.io/jramke/pen/poqbzMR?editors=0110 In both demos the image again dissapears during the flip animation in safari 16.6 and Chrome 116 works fine. I also tried the things mentioned in this thread on the forked pen but nothing seems to work.

Hey, i created a Gallery with a lightbox. Each image has a clippath wich is animated with gsap on mousemove or on the open/close transitions to get some sort of lerp movement effect. To animate the position change of the images from grid to lightbox i used gsap.Flip animations. In chrome everything works fine but in safari the image is not visible when transitioning into the lightbox. On my live site the image then is visible after the Flip animation which is not the case in the codepen. I think this isnt directly related to GSAP and more likely because of the clip-path implementation from safari. I already tried some things i read here in the forum like will-change: transform; , translate: transformZ(0); , adding a rect to the svg element or forcing the browser to rerender the element with setting the clippath during the onUpdate function, but i couldnt make it work. Thanks for your time and help.

hahah, yeah i got inspiration from his page, and some others, im going to mention them on the live site. I didn't know this copydennis thing but I think I could have ended up there otherwise but i already threw out things like the footer and the page transition because it was really to similar to dennis'.

If anyone is stumbling upon this issue, i fixed it for me. In the beforeNavigate hook i created a clone of the image i want to move on page transition with Flip.fit(). I also set the window.scrollY to this element. On the afterNavigate hook i call disableScrollHandling(). So the page dont scroll before transition end (default sveltekit behavior). I used the build in svelte transitions (just simple fade), so i handle the next stuff inside the on:outroend callback. There i scroll to the top immediately (im using lenis) and set the y attribute of the clone from window.scrollY to 0. IMPORTANT: altough we're in the outro end callback i needed a timeout of 100 ms where i get the new target sate and call Flip.to() with targets: clone . OnComplete i remove the clone and we've got a nice smooth transition. You can view it in my portfolio if im done with development joostramke.com. I hope i could help if someone also struggles with this.

Hi, thanks for your time. Unfortunately your codesandbox link gives me an error (Sandbox not found). But as you said it is something css related. I edited my sandbox demo (removed some css and moved the data-flip-id directly to the img tag) and now its working. https://codesandbox.io/p/sandbox/zealous-babbage-rp4z43?file=%2Fsrc%2Froutes%2F%2Bpage.svelte%3A13%2C84 Im going to play around with the css in my project and maybe i can make it work.

I wanted to add a page transition with Flip where an image from a list is moving to the place where it is on the detail page. Something like this https://stackblitz.com/github/joysofcode/svelte-gsap-flip?file=src%2Froutes%2F04-movies%2F%2Blayout.svelte i implemented it in my project but the animations starts at the wrong position. If i log the Flipstate the elementStates.bounds are correct. I tried it in a sandbox sveltekit template demo and there i got the same problem but only when going from about to home, if im going from home to about its working. https://codesandbox.io/p/sandbox/zealous-babbage-rp4z43?file=%2Fsrc%2Froutes%2F%2Blayout.svelte%3A51%2C19 What am i missing?

SOLVED (see codepen) it was because i always created a new tween.

Hey guys, im trying to recreate this effect (https://codepen.io/ReGGae/live/povjKxV) but without threejs. I used svg clippath for this. So i have a paused gsap.to() tween wich is animating to the clippath (eg. for the arch to left or to the right). Now i want to animate the progress of this tween relative to the movement of the pointer. I also calculated a variable (relativeDistance) that returns this relative value from 0 to 1. My expectation was to call animation.progress(relativeDistance); // or gsap.to(animation, {duration: 0.1, progress: relativeDistance}); The problem now is when i want to set (or animate) the progress the animation doesnt stop. It seems like the progress is adding up with each interval. To visualize that i created an interval at line 44. My expectation for this interval is that the progress is set to 0.01 at each interval and the clippath should not move. I hope i made it understandable. Thanks for your help

Hey guys, thanks for the really fast answers. I think the solution with the eventlistener ist working better for me, but im definitely having a look at the autoAlpha property, this sounds cool. For future gsap questions im definitely coming back to this forum.

Hey guys, i have a problem with creating and animating images form a data-attribute. First step im creating the images and then want them to hide , and only be visible on mouse hover, thats working so far so good. But when im hiding the images with gsap (opacity: 0, scale: 0.4) after creating them, they are buggy/delayed on the first time the opacity and scale are set to 1. If the images where visible once they are appearing smoothly. I dont really know if its a gsap issue or im missing some basic knowledge when creating images with js. For example if i set the opacity to 0.1 for the hidden state and not to 0 the images appearing smoothly on the first time. Thanks for your time and help. Joost