Gsap slider Animation problem to center the div

[yashc]

https://codesandbox.io/s/cocky-waterfall-9ktq1c?file=/src/containerjs.js
 This is Code sandbox link for my project, i want it so that the images  will be scrolled horizontally, but when i scroll  and click on any image the image will open and center itself from the position ( just the kind of effect doesnt have to be) And the must center itself I tried for like 5 days but none of the things work for me, also gsap is amazing falling in love with it day by day, Would appreciate Any help as i am stuck on brick wall , Thank you 
Independent Designer & Art Director (camillemormal.com) Its kind of a effect the scroll from this website i wanna creater that and modify it for my website 

[Rodrigo]

Hi @yashc and welcome to the GreenSock forums!

 

Is great to hear that you're enjoying GSAP and it's tools!

 

That is quite a great site, nice effects and animations. If you inspect that site you'll see that the images stripe is inside a canvas element as well as the main image when you click on one of the projects.

 

If you want to replicate that you'll have to use a flex container in order to display the elements in an horizontal stripe (as the original site). Right now you have the images naturally stacking based on their size.

 

Also you're not using Flip properly. First you're doing this:

const t1 = gsap.timeline({ defaults: { duration: 1 } });
const state = Flip.getState(divs);
t1.Flip.from(state, {
  duration: 2,
  ease: "power3.inOut"
});

There is no need to create a timeline for this, a Flip from instance returns a GSAP Timeline. Also you're not updating the element's state, so basically you're telling Flip to animate the element from it's current state to it's current state, so nothing happens. This is the approach you have to follow:

const state = Flip.getState(divs);
// Make changes to the element, such as making it a full screen element for example
// Then call Flip.from in order to animate from the previous state to the current one
Flip.from(state, {
  duration: 2,
  ease: "power3.inOut"
});

Here is an example of the approach for scaling up an image:

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

 

My recommendation is to take it one step at a time. First create the images stripe, then add the Flip functionality and finally create the ScrollTrigger instance for that. Unfortunately what you're trying to achieve is not a simple task and we don't have the time resources to provide free general consulting in these free forums. If you want you can contact us for paid consulting or post in the Jobs & Freelance forums.

 

Good luck with your project 👍

Happy Tweening!

[yashc]

Hey there thankyou for the reply i really appreciate the fact that you took time out of your busy day, i just had couple of questions i wanted to ask i want to learn gsap and this is kind of my learning project i seem to got the slider and everything scrolling my problem is only that when i click on the div itself it doesnt come to center maybe i can achive that with something like scroll to? my problem that when i scroll the x position changes but the div gets scrolled passed and the image opens but as the div is offset by scroll x the image doesnt get centered and always comes bit off, tried number of solutions, like scroll to  but it seems like when i click on image the window wont scroll to the element that would also fix the issue  could someone suggest any types of ideas or maybe solutions that you might know of? 


 

[Rodrigo]

Hi,

 

Do you have a minimal demo that shows those issues you're mentioning?

 

Is really hard for us to find an issue or give appropriate support based on a one paragraph description.

 

As I mentioned before, take a better look at the way Flip works:

1. Get the state of the element you want to animate with Flip.getState()
2. Make the changes to the element you want to animate, in this case make it full screen.
3. Animate the element using Flip.from()

I suggest you to practice this without the scrolling part, using just Flip and then you'll be able to add the scroll and get everything tied up together.

 

Happy Tweening!

[yashc]

Hey there yea i understand sorry for not providing a minimal code but sandbox doesn't seem to have the code i have work properly even though it works fine on my system, so i created a video explaining my problem. 
 Did get the flip plugin to work properly thank you so much for that now i understand how the plugin works. 
Here since i cannot post YouTube link here as it says embedding issue or something there is a YouTube link in my code sandbox explaning the issue at hand.
https://codesandbox.io/s/trusting-architecture-oi9f3i?file=/src/styles.css

 

 

[Rodrigo]

Hi,

 

There are a few things that you should consider in this case. When using GSAP in a React app is better to use GSAP Context for doing proper cleanup in the effect hooks:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Also I suggest you to take a look at the resources in this page:

 

Unfortunately we don't have the time resources to provide fully working solution to our users, so the best I can do for you right now is the Flip part of this:

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

 

You'll have to add the ScrollTrigger bit to this.

 

Hopefully this helps.

Happy Tweening!