Skafec Posted June 4, 2020 Share Posted June 4, 2020 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 More sharing options...
Shaun Gorneau Posted June 4, 2020 Share Posted June 4, 2020 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 5 Link to comment Share on other sites More sharing options...
Skafec Posted June 5, 2020 Author Share Posted June 5, 2020 Hey @Shaun Gorneau I made few modifications to your solution and it works great! Thanks for your help! Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted June 5, 2020 Share Posted June 5, 2020 Happy to help, @Skafec! Link to comment Share on other sites More sharing options...
Skafec Posted June 5, 2020 Author Share Posted June 5, 2020 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 More sharing options...
Shaun Gorneau Posted June 5, 2020 Share Posted June 5, 2020 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now