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

Hi, I am trying to do an animation where a background image should pin (like forever), grow for some time and then the menu appear on it (and some other things possible). When I use 1 ScrollTrigger to do it, I can't really manage the moment where the content should appear. If I use 2 Scrolltriggers (the first to pin, the second to animate the img), the second one wait for the first to finish. Do you have any idea ? I think I can handle this with a translateY on content and add the height of the content to the pin, but I'm not sure that's the good thing to do Thx

Hi, First of all, sorry for my english, I'm not an english native speaker. I try to do a complete Carousel with Draggable. Actually, I use snaps with a basic function : return Math.round(x / slideWidth) * slideWidth Doing this forces me to use only slides with same width. I try to change that, with slide which size changes when they are "active" But I struggle a lot. Do I need to use liveSnap ? If you have an idea, that could be great

Oh yes. I already transpile gsap, but yeah, I can do that import. Thx

Ok, I get it. The problem occurs when I use ScrollTrigger in the main component element. I needed to had a container as a trigger.

Hi, Yeah, that's the problem, but in hr, my component element is already set. I don't understand what ScrollTrigger doesn't like here. If I console.log my element, everything is fine, but ScrollTrigger doesn't recognize him.

Hi Cassie, In the Nuxt lyfecicle, when you change something in your component, only the component "update". When you arrive on the project, everything works fine, but when you update your component (for example, change the console.log), the component should update, and here, there is an error.

Hi, First of all, sorry for my english, I'm not an english native speaker. I have an issue when I use ScrollTrigger and Nuxt. https://codesandbox.io/s/scrolltrigger-nuxt-update-component-wlo2y You can see the demo here. When we reload, or come for the first time in the page, there is no problem. But if you make Nuxt reload the component, you can see an error appear. If you change the console.log, you can see the WebApp updates, and there is a bug who appear. Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. The bug only appear when you pin the element. I understand the problem, that's the trigger we pass to ScrollTrigger which isn't good, but I don't understand why. Does anyone has an idea ? Thx

Hi, When I developped something like that I had some issues too. On nuxt every time you destroy your component, you need to kill your timelines and your ScrollTrigger instances. I didn't build my timeline like you. Maybe can you try like that ? mounted () { this.animation = gsap.timeline({ scrollTrigger: { id: `featured-${this.blok._uid}`, trigger: `#featured-${this.blok._uid}`, markers: true, start: 'top 75%', end: 'bottom bottom', pin: false, scrub: 2, }, }) this.animation.from( this.$refs.heading, .8, { autoAlpha: 0, y: 100, }, '-=.6', ) this.animation.from( this.$refs.title, .8, { autoAlpha: 0, y: 100, }, '-=.6', ) this.animation.from( this.$refs.content, .8, { autoAlpha: 0, y: 100, }, '-=.6', ) this.animation.from( this.$refs.buttons, .8, { autoAlpha: 0, y: 100, }, '-=.6', ) this.animation.from( this.$refs.additional, .8, { autoAlpha: 0, y: 100, }, '-=.6', ) }, destroyed () { const scrollTriggersInstances = ScrollTrigger.getAll() scrollTriggersInstances.forEach(el => { if (el && el.kill) { el.kill(false) } }) this.animation.kill() },

Hi, Yes, this version has no problem That's perfect, thx

Haha, that's a meme, but yes, that's exactly how I was when i saw that bug