Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Skafec

Animate image in gallery when rest is hidden

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 post
Share on other sites

Hi @Skafec,

 

Have a look at this CodePen to see how you can move an element to the top left corner ... also, clicking that same tile moves it back to its original position.

 

See the Pen wvMBzoo?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Happy tweening!

 

Shaun

  • Like 5
Link to post
Share on other sites

Hey @Shaun Gorneau

 

I made few modifications to your solution and it works great!

 

Thanks for your help!

Link to post
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 post
Share on other sites
5 hours ago, Skafec said:

is there any way

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

 

Yes, defintely. It's a matter of somewhat reversing the logic and using a negated if statement

 

See the Pen oNbgKzV?editors=1010 by sgorneau (@sgorneau) on CodePen

  • Like 2
Link to post
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.

×