image zooming to full screen on click

[markhore]

Hi,

 

i'm very new to greensock just couple of days old, i'm building a gatsby site where i wanted to use greensock for animation specially for page transition using gatsby "page transition plugin successfully integrated animation works on page transition.

 

next part is i have portfolio thubmails when we click on thumbnail, thumbnail should go fullscreen and than second pages appears. but im unable to fix thumbnails animation, please check codepen ( it was for single image and was working fine but i modified the structure )

 

mainly i want to recreate this http://clapat.ro/themes/satelite-wordpress/classic-portfolio/

 

 

See the Pen dyPdoJJ by yasirhaleem (@yasirhaleem) on CodePen

[elegantseagulls]

Hi @Yasir,

 

Your css setup is preventing your .box from going full-width. Adding flex-wrap: wrap; on the container will help, but you may run into some other issues with that. You'll also likely run into some image quality issues with this method.

 

To create something like this, without canvas, I'd likely preload the fullsize images and scale it in from the clicked position on a fixed position, full-screen div, that way you can control the final image relative to the viewport (going full screen). This is somewhat similar to what the referenced site is doing, at a quick glance.

[markhore]

Thanks @elegantseagulls

 

even if i hide other boxes on click still the animation is not good, not as smooth as they did on ref site, need some calculation on positioning, hope someone will help on this

[elegantseagulls]

Hi @Yasir,

 

Like I mentioned, you'll likely want to preload the full size image in a fixed position container to animate them from their thumbnail position on the page (scale will animate smoother than height/width, but you'll loose some ability to change the crop/overlfow ratio during the animation), to full viewport size. To get position of your clicked thumbnail you can use something like: element.getBoundingClientRect();

[markhore]

Hi @elegantseagulls

 

can you please convert it to react ?

 

See the Pen yLyvavQ by yasirhaleem (@yasirhaleem) on CodePen

[ZachSaucier]

5 minutes ago, Yasir said:

can you please convert it to react ?

Sorry, we don't have the capacity to help with every request like this. So you may not get this request answered in the way that you like. If you run into specific issues we're happy to help however we can. 

[ZachSaucier]

This Codrops article can give you more insight as to how the site that you linked to was made: https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/

 

Or you could look at the code of the theme that you linked to. I recommend buying it if you do so.

[markhore]

5 minutes ago, ZachSaucier said:

This Codrops article can give you more insight as to how the site that you linked to was made: https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/

 

Or you could look at the code of the theme that you linked to. I recommend buying it if you do so.

i have that theme ( purchased ) but its wordpress theme, i want to do the same with gatsby, i'm almost done can achieve the other animations but this "positioning" thing is not working

i'm hiding ( fading out ) other elements on page when click on box but my animation is not as smooth as in codepen i shared ( its not mine, i got this from this forum after reading more than 30pages )

 

thanks a lot for looking into this and suggesting the codrops link.

 

[ZachSaucier]

I recommend studying and really understanding what the theme is doing under the hood. Once you understand how they're positioning and animating things, you can do the exact same thing in React! 

[markhore]

i have to study both code and react!  will share here if i got it working

[Kevin1]

@Yasir Hi Did you find the code for this effect?

If you did please can you share me?

[N3O]

hi ! any hint on how to make this effect with react and react-router-dom ?

[GreenSock]

10 hours ago, N3O said:

hi ! any hint on how to make this effect with react and react-router-dom ?

@N3O what have you tried so far? If you provide a minimal demo that clearly illustrates the problem, we'd be happy to answer any GSAP-specific questions. Here's a React starter template you can fork: 

 

https://stackblitz.com/edit/gsap-react-basic-f48716

[Rodrigo]

Hi @N3O,

 

I believe that this thread is related to this one, right?

A couple of answers have been given there, so if it is related, please let's focus our efforts in that thread.

 

If not, follow Jack's advice in providing a minimal demo.

 

Happy Tweening!

[N3O]

@Rodrigo   @GreenSock

 

I believe I have found a potential solution for implementing transitions using the Flip plugin with React and React Router DOM. My approach was inspired by this Vue.js example: 

See the Pen eYdXZJZ by GreenSock (@GreenSock) on CodePen

 . 

 

However, I'm encountering issues with the animation transitions, it appears somewhat awkward, and I can't pinpoint the cause. I would appreciate it if you could review the React adaptation of the example I've created on CodeSandbox: React exemple . 

 

Any assistance in resolving these animation issues would be immensely helpful.

Thank you!

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://gsap.com/resources/React/

Happy tweening!

[N3O]

 

@GSAP Helper

 

Hi there!

 

Thank you for the insightful advice on using `gsap.context()` for managing animations within React.

 

Following your directions, I updated my code to incorporate the context call, and I'm pleased to report that it works wonderfully! The cleanup pattern you described, using `useLayoutEffect()`, has significantly improved the behavior of the animations, and the issue with animations appearing awkward has been resolved.

 

I truly appreciate your help and the resources you've shared. Happy tweening, indeed!

 

Best regards,

[Rodrigo]

Hi,

 

is great to ear that you were able to solve the issue and got it working as expected.

 

on a final note we also have a brand new useGSAP hook that makes the whole process easier, take a look at the information we have in the NPM page to see how simple is to use and implement it 

 

https://www.npmjs.com/package/@gsap/react

 

Happy Tweening!

[N3O]

@Rodrigo

 

it's awsome thanks ! 

 

I have a question concerning the Flip plugin if you don't mind. It seems that by default, the plugin records all positioning and size properties for elements. When flipping one component to another location, it inherits these default properties. However, I'm encountering a problem with this behavior

 

I've got a component chilling at the bottom of a scrollable container. When a user clicks on it, the component's state gets saved before we hop over to a different page. Here's where it gets funky. When I try to flip a component on the new page, it insists on animating from its old spot at the bottom of the previous page, creating a scroll zone where none is needed. I sketched out what's happening to help visualize the problem.

 

 

I'm on the lookout for a sweet workaround that can keep the animation in line, without any scroll side effects. Got any tricks up to go around that? Cheers for any advice you can share!

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[N3O]

18 minutes ago, N3O said:

@Rodrigo

 

it's awsome thanks ! 

 

I have a question concerning the Flip plugin if you don't mind. It seems that by default, the plugin records all positioning and size properties for elements. When flipping one component to another location, it inherits these default properties. However, I'm encountering a problem with this behavior

 

I've got a component chilling at the bottom of a scrollable container. When a user clicks on it, the component's state gets saved before we hop over to a different page. Here's where it gets funky. When I try to flip a component on the new page, it insists on animating from its old spot at the bottom of the previous page, creating a scroll zone where none is needed. I sketched out what's happening to help visualize the problem.

 

 

I'm on the lookout for a sweet workaround that can keep the animation in line, without any scroll side effects. Got any tricks up to go around that? Cheers for any advice you can share!

@GSAP Helper Apologies , you were correct. Here's the link to a demo. When you access the page, please scroll down a bit until you see a blue box, and then click on it to see the demo in action: react js demo 

[GreenSock]

Typically, you'd capture the before state immediately before you change the state but it looks like you're capturing state at a completely different time (after the end of the previous animation). From what I can tell, Flip is doing exactly what it's supposed to do. Let's say the blue box is 4000px down from the top of the page and you capture state there...and then you suddenly scroll the page all the way up. It should animate from 4000px down from the top of the page to the new position. It's doing all that, right? 

 

So in essence, you're wanting it to animate from a DIFFERENT state (one that simulates it starting at a much higher point on the page, as if it stayed in its place in relation to the bottom of the viewport even though you scrolled way up), right? 

 

I guess one idea is to fake that by doing a gsap.set() that moves the element way up to where it'd be if your page wasn't scrolled at all...THEN capture the state, then move it back (so the user would never see it). This really doesn't sound like a great way to engineer things, though. You'd still be doing things in a very odd order and it wouldn't be good to assume exactly where the user may have scrolled at that point. Again, that's why the typical flow for a Flip animation is to capture the state right before the state changes, then make your changes, then Flip.from() so that it's all perfectly synchronized. But in this case you'd still have problems because you're capturing state at a certain scroll position, and then you're scrolling all the way up and running the Flip.from(). 

 

I just don't see a super simple way of accomplishing this, and I don't have time to try to wire up custom logic for you, sorry.

[Rodrigo]

Hi,

 

On top of Jack's advice I see this in your Category.js component:

<div
  onClick={handleNavigateToCategories}
  style={{color: "white",}}
>
  Back
</div>

With this in the function:

const handleNavigateToCategories = () => {
  navigate("/");
};

That is going back to the index route immediately, there is nothing else happening there. You should capture the state with Flip before going back to the next route and run the animation after, or create and run the Flip animation and change the route when the animation is completed.

 

Happy Tweening!