Simon.Gioffredi

@Rodrigo Hello, Indeed, your example works as expected and allowed me to see where my mistake was (even if I don't understand the problem). I was installing gsap this way and the version is 3.6.1. "gsap": "./gsap-bonus.tgz" But if I use the same thing as you, gsap is in version 3.11.5. "gsap": "file:gsap-bonus.tgz" I have done some testing and the problem is with yarn. When I do $ npm install ./gsap-bonus.tgz, it creates the right entry in the package.json (with the file:). But when I use yarn, $ yarn add ./gsap-bonus.tgz, it doesn't put it automatically. I have the same problem on your example. Thanks for your time,

Hello @akapowl, I can't test it with Stackblitz because I need to pay and that's not possible actually. I'm gonna try to install gsap without gsap-bonus.tgz If I copy/paste your CodePen into my project, that's not working, but only if I install gsap with gsap-bonus.tgz. If I do a classic installation of gsap (npm install gsap), that's working. Yes, I know that, that was just for here. Maybe am I missing something but in your Codepen you didn't used horizontal: true anywhere, but 'left somewhere' and 'right somewhere' are working as expected. I didn't set horizontal: true on my project and that's working too now, so I don't really understand.

@akapowl After several tests, I wonder if the problem would not come from the gsap-bonus.tgz. I develop on a Nuxt, so I use the package NPM gsap installed with the gsap-bonus.tgz. When I use this package, the ScrollTrigger start: 'left' does not work. It's exactly like if I do a start: 'top'. But if I remove this package, install gsap classically with npm and add the ScrollTrigger link that we use in CodePen, then everything works fine. In both cases, the version of Gsap is the same, i.e. 3.11.5. I don't know how I can get the ScrollTrigger version to check that it's the same in both cases. I'll keep investigating, but can you check on your side that everything is ok on this level?

I will continue to work with containerAnimation. It allows me to do one less ScrollTrigger, so I have a bit more performance. I just realized that I have a problem on my real project with ScrollTrigger, since it does not take into consideration right and left. It uses it as up and down. I'll see if I can fix that, but that's why I couldn't do what I wanted. Thank you very much for your example, it's exactly what I was looking for.

Hi @akapowl, thanks for your answer I am aware of containerAnimation but in my mind, it is not so simple to set up. My horizontal scroll is set up on my section which contains 11 items that should animate as they appear. If I want to do this with the AnimationContainer, I have to get the percentage of progress of the Horizontal Scroll and then do several calculations to animate the image according to the right section that is displayed. But maybe I didn't understand how it works, I'll try to set it up again.

Hello, I am trying to set up a horizontally scrollable section that pinches. In this section, there are images that appear with a scale of 0.75 and that must be at a scale of 1 in the middle of the page. The pin and the horizontal scroll are well set up and working, but I can't finish the animation of the images at the exact center of the page. I made a simplified Codepen, with my divs and images. The black bar represents the center of the page and the blue bars the center of the images. What I would like to achieve is that when the blue and black bars overlap, then the end bars of the ScrollTrigger also cross. I don't understand what the problem is. Does anyone have an idea? See a solution? Thank you, Simon

Hi, Yeah, that's perfect. I just added a different y value to delay a little the title apparition, but that's perfect Thank you

I finally finished this animation. https://codepen.io/simon-gioffredi/pen/qBoVLxx I think there is a better way to do it because I got some performance issue sometimes. Someone has an idea ?

Hi @Cassie Thank you so much for your work. I work on this actually but I don't know if that's a good way to do it https://codepen.io/simon-gioffredi/pen/dymZqvm Both of our solutions are not perfect, because there is only 1 image which moves. And I need the slide to be in relative position, because the title give us the slide height. I'm gonna continue to work on it

Hi Cassie, I tried to do it (around everything) but that's not working and I find this dirty in my architecture. Do you have an example of this Timeline ? I'm gonna do this too then, that's gonna be easier. Yeah, I love dogs

Hi, I have done an immersive slide effect : https://codepen.io/simon-gioffredi/pen/rNdYxPY On my website this should be used in 2 templates. The first one is an immersive template just like the first codepen and that's working like a charm because there is only this. But the second template is an edito. So this animation can appear at the top, the bottom or the center of the page depend of what is choosed in our CMS. And as you can see that's not working. https://codepen.io/simon-gioffredi/pen/OJvONKj I understand why that doesn't work, but I don't know if there is a way to handle this ? If I can't use ScollSmoother to achieve this should I try to rework this effect with a ScrollTrigger ? Thx

I managed to did it like that https://codepen.io/simon-gioffredi/pen/eYMWmow In my website, I also calculate when the content can show, with an onUpdate in the timeline. I think that's not perfect, because that's not very accurate, but that's gonna be enough. Thx

I was wondering if that was the best thing to do because that's need "a lot" of calcul. I think that can work, i'm gonna try it, thank you

@mvaneijgen I think you didn't add the good Codepen link ?

Hi Cassie Yes, I know this parameter. Anyway, the timeline isn't the real problem (I think). That's juste an animation which put the img in full height and width. if I use the timeline alone, the image goes full like I want. My concern is more about ScrollTrigger here. What I want, in order : Start : Pin the image for all the rest of the scroll (I want the image to be in the background) Start : Animate the image (she starts little and the more we scroll, the more she grows) When the anim is over : I want to have some scroll (adding like a delay of 150px) After this "delay" : My content should go above the image I don't know if that's clear enough. Thx