Jump to content
Search Community

Animate image in gallery when rest is hidden

Skafec test
Moderator Tag

Recommended Posts

Hey guys,

 

So I have this use case. I currently have gallery of portfolio images on home page.

 

These are links for their own single blog posts.

 

These are taken from prismic through API. On click I have function where

every image except the clicked one is hidden. To hide other links I use the following code:

gsap.to(".hide", { opacity: 0, display: "none", ease: "power3.out", duration: 0.6 });

Now I would like to animate the remaining image to get at the start of the gallery. Right now it jumps to start

of the gallery when other elements are hidden. 

 

Generally every image should have the ability to animate to the top left corner of the wrapper.

 

After that I would like to scale image up once single post content is rendered.

 

Any ideas on how to make this happen?

 

Thanks & Regards.

Link to comment
Share on other sites

Hello @Shaun Gorneau

 

Sorry to bother you once again, but is there any way

to just move the element once and not move it once it is clicked again?

 

I removed the else statement which doesn't render the rest of the elements anymore,

but if I click on the element again, it moves to it's original place.

 

Thanks & Regards,

Skafec.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...