newguy123

So this takes care of the useLayoutEffect and also the cleanup for you it seems? Nice!

Another option, but it gets even weirder and still not doing what I expect. Now the thumbnail moves down,and the fullres version just appears. Weird stuff https://codepen.io/newguy123/pen/XWOxbWB

here's the exact css and js from the original, but it doesnt work as expected https://codepen.io/newguy123/pen/poGxjLz

yes in that simple demo with 1 div it works point is in my project with several div levels deep, it doesnt work if you notice, the JS is exact same the css is pretty close but the html is totally different as I have many divs inside divs. The actual project have other things in there also, but I stripped it out to show the issue here

Try as I might, I just CAN'T seem to get the zoomed image free from its container on the right here. When it zooms, I want that image to be full viewport height, and positioned center/middle of the viewport. Kindly help me out https://codepen.io/newguy123/pen/yLZRNQQ

I had a similar question, and Jack posted this on my thread, which helped a lot: https://stackblitz.com/edit/react-6u8izj?file=src%2FApp.js

actually correction, I initially only tried the css of the the larger image, and THAT messed up the layout now that I added the Flip code, things ALMOST work. HOwver on the bit where I'm trying to get the image to go fullscreen, it STAYS INSIDE its own container. The layout and everything else works as expected, just the image DOES not go fullscreen, but more, it goes full current container How can I get it to break OUT of its current container and fill the screen?

Yes this is what I did with zoomed version, and it makes sense that the zoomed version would mess up the rest of the layout as its 20 times bigger. I geuss I just thought it somehow hides the visibility of the smaller one so the layout doesnt get affected, and then just stick the big one over over it. I'll go through the video in the flip docs and see if anything pops out from there, failing that I'll do as you say and strip down my project to try and demonstrate the issue better

thanks. This works in my simple pen, but in actual project it totally messes up the rest of the layout I have my tumbnail sized image several divs deep in my site, but the zoomed one I want full screen as per the pen, over everything else is that where things would come in where you actually need to do this kind of thing with 2 differnt images?

Thank you, and apologies for not posting my own pen originally. Here's a forked version with some modifications I made. Any idea WHY scrollbars appear on the zoomed version, or is it just a editor bug from the pen ide? There also appear to be a slight jump/glitch type of thing going on just towards the end of each transition. https://codepen.io/newguy123/pen/BaMOmWG

Hi This example ALMOST shows what I'm asking, however it seems to use 2 different sized images. Can I adjust it so it uses the same image and just flip between a css scaled down version and a css fullscreen version? https://codepen.io/GreenSock/pen/XWKLYWe

Hi As per my StackBlitz below linked, I have 3 headings, each one coming up individually center screen as you scroll. As the heading comes in, it fades in from 0 opacity to 1 over a short duration, then fades out again as you continue scrolling. Weird thing though, in reverse, the heading just pops in straight from nothing to 1 opacity, instantly without it tweening it seems. What am I doing wrong here? I will have many more headings later, just 3 now for demonstration. As you can see I've commented out an image sequence which is 2000vh high so I need to show various headings, synced to certain parts in the image sequence. So perhaps there is a more accurate way to position the headings coming in, other than the % usage I'm using currently? Also, can this entire thing be made more efficient? Seems I'm doubling up on code a lot. Appreciate your thoughts, suggestions, help and advice https://stackblitz.com/edit/react-zftzut?file=src%2FApp.js

Thanks Jack. Got pretty close to this, I just didnt add the initial framecount and url array into the useLayoutEffect ...and also forgot to import the ScrollTrigger from gsap/ScrollTrigger Thanks, I looked at some of those. Probably needed to look at some of the more complex examples further down the page Yep, Understood I may need to add additional sections to this and some other animated bits, but I'll ask for some help if/when I get there and if I can't figure it out on my own

Ive added the imageSequence inside the gsap.context inside useLayoutEffect, but it still doesnt know what canvas is...

the problem is that those examples are simple little squares ande circles and getting directly animated, where the airpods thing has its own function doing things. Its that function I'm having a hard time with to convert to React. Its getting the context of the canvas in the function, when the canvas is returned in the app, but the function is not seeing it for some reason

ok this seems to be my correct stackblitz link now (apologies for the mixup) https://stackblitz.com/edit/react-i9fqyh?file=src%2FApp.js

ah seems I need a pro account to share codesandbox this is so frustrating. OK let me revert to stackblitz and see how to share my correct link.....

no then I must have shared the wrong stackblits link. Look and my codesandbox link instead please

I think I prefer codesandbox to stackblitz. Here same thing as above (not working),but on codesandbox. It gives better error info I think. Can sombody please help me convert the example properly to React https://zrcv35.csb.app/

OK this doesnt work and throws errors, but besides that, this is my 1st stackblitz share so hopefully I'm doing that correctly at least: https://react-i9fqyh.stackblitz.io So the majority of the code in App.js, is more or less copied and pastes as is from the 1st pen in my 1st post in this thread.

I'm seeing how to create a stackblitz account to get a pen going on it for easier explanation...

Errors I get in the console when I try to convert to to React: scrolltrigger cannot read properties of undefined (reading 'left')

Hi I'm going through these pens from other threads, which work fine as is, however I'm having a hard time converting them to React version. https://codepen.io/GreenSock/pen/abRmemz https://codepen.io/GreenSock/pen/VwgevYW

thanks for that. It looks great. How would I get it though to be 20px away from the top and left? In that case, would you suggest to use the Flip plugin instead, or could your codepen just be adjusted slightly?

Hi I'm having a hard time working out how to animate my logo from center middle of screen, to top left. Any help please? https://codepen.io/newguy123/pen/VwgWMva That all works fine to animate it to the left, however if I uncomment the marginTop and display absolute, it no longer works. Any ideas?