mvaneijgen

I would get in to the habit of never animating your trigger element, in this case it will probably be fine, but better save then sorry. I've wrapped your .trust-item in an element called .trigger and used that as the trigger element now your trigger and element you animate are separate. I've restructured your pen a bit, personally if a ScrollTrigger has an animation I like to combine the two, so there is no confusion what code does what. Then because you want things to animate first, but pin later, just add another ScrollTrigger that just does the pinning. I highly recommend reading the ScrollTrigger docs, just once to see what all kinds of awesome features are in there, because I've used a few. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdgYRyq?editors=0010

You're having multiple issues here, my advise make it simple! Instead of having loops upon loops, just focus on the first animation you want at hand, just the basic version. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Check out my post about making things simple. Hope it helps and happy tweening! Here an example with just the basic tweens and one element, just to get the basics down. Now this is working which allow you to focus on the scoping and looping for other elements. Again my advise keep forking your work this will create backups and thus you can fall back if something is not working. https://codepen.io/mvaneijgen/pen/RwOmoqV?editors=0010 Check out our own @Carl's tutorial if you want to have this seamlessly loop! https://www.youtube.com/watch?v=0DSkgXNFZHs

You can use the ScrollTo Plugin for that. I've create an array and pushed all your ScrollTrigger to that array. Then in your click handler you select one of them and get it .start of .end value and then scroll to it. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/QWPRNjO?editors=0011

If that is important check out the Flip plugin with Flip.fit https://gsap.com/docs/v3/Plugins/Flip/static.fit()/

instead of animating width try setting the scale of the element, this is much more performant and has the befit that the logo is still responsive (see your demo on line 14) change width: "236px" to something like scale: 0.2, or another value that looks better.

This is mainly a scoping issue. You have two .flickities elements and for each of these element you want to do some animation, so you'll need a .forEach loop for each of these elements. I have no idea what your animation should do, but you're having a lot of code that doesn't seem logical to me. Example a timeline has a repeat feature build in and setting repeat: -1 will repeat infinitely, so no need to build your own function. Also you're using the GSAP v2 syntax a lot has changed in v3 so I highly recommend check out this awesome getting started guide https://gsap.com/resources/get-started/ I've used the https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() to scope the q(".flickity"), to the current .flickities element. I've disabled a lot of your code, because I can't figure out what it should be doing. Again check the getting started guide, it explains all the basic features you'll need in GSAP and also just read the docs once you'll be surprised how much is already build in to GSAP https://gsap.com/docs/v3/GSAP/Timeline/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOmNOP?editors=0011

Just change the duration of the logo animation so that it lines up how you want. Please share a new (forked) demo with what you've tried, so that we can take a look at what you've changed.

Personally I would always create timelines in GSAP and have ScrollTrigger control the timeline you create. I've restructured your JS and give all your ScrollTrigger an ID so that when markers are on you can see when what is happening. I'm not sure if 150vh works like that in ScrollTrigger, but I personally would just the current window.innerHeight and then times 1.5 to get 150%. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNORgwJ?editors=0010

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! I would add another addEventListener to use button to check if the mouse is entering or leaving and then you could use something like https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()/ to move the element from it current position to the center one. Also check out the quickSetter() in GSAP, a much more performant way of having things animate on mouse move. https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/ Hope it helps and happy tweening!

Hi @marcow welcome to the forum! From your screenshot I see you load your motion-gsap.js BEFORE all the GSAP scripts. It is recommended too load your own script AFTER all the dependencies you'll need. As a work around you can wrap your custom code in a load listener eg that way you're sure your code gets executed when everything on the page has load. window.addEventListener("load", (event) => { // your code here! }); Hope it helps and happy tweening!

Hi @LVegetable welcome to the forum! Have you seen our Stackblitz starter templates? It has a boilerplate for all the major frameworks, including next.js In all my time developing websites I've never needed to overwrite the default scroll behaviour there is always a better way, I think. From your description I would also not read anything that needs to overwrite the default scroll behaviour. Your background can just be a fixed element and the other elements can just scroll or animate them with the y property in GSAP. Keep in mind that everything in GSAP is an animation, even things on scroll start out as an animation. Check out this tutorial how to work with ScrollTrigger Personally I always start in codepen and really focus on the logic I need before I bring it over to my framework. It usually takes me around 10 versions to get to a state I am happy with and then it will be trivial to port it over to what ever framework you like, but the web is basic HTML, CSS, JS so if that is solid it will work any where! You can work with React in codepen and you can then set it up like the pen below. But again, personally I would remove all abstractions and just focus on the basics and when that is working your can port it to what ever you like. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/OJmQvLZ?editors=0010

By changing the order of the ScrollTrigger creating and setting pinnedContainer to the ScrollTrigger that have another ScrollTrigger that has a pin you can fix this issue. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/vYMPeEg?editors=0010

Check the demo again. I've changed your tween from a .from() to a .to(), so that will reverse the logic. So in my example it scales from scale: 1 to scale: 0.1

Hi @CRE-ATE welcome to the forum! What for me works best is having the scale always between 0 and 1, where 0 is the minimum and 1 is the max it can have, setting scale beyond that will result in rendering bugs/issues. So in your case make the logo as big as you want it to be and then scale it .to() the value you want it. See demo below. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PogLKwP?editors=0010

Yeah that is an easy fix, check out the video below if you need any help

Glad you've solved it, be sure to check out FOUC guide https://gsap.com/resources/fouc/ there is a detailed guide how you can avoid these kinds of things. Happy tweening!

Sadly we cant live debug a GitHub repro. Also we don't need all the code just the minimum issue you're having trouble with, that is why we've created ou Stackblitz starter templates so you can jump in and just create the bare minimum to demonstrate the issue you're having.

Hi @spotipre welcome to the forum! The angled black part you can do with a clip-path animation, see simple demo below https://codepen.io/mvaneijgen/pen/MWLxyPp And the weird image effect you can probably do with something like Pixi.js. Keep in mind that this question is kinda outside of the scope of these forums, we like to focus on GSAP specific questions, so if you still need help be sure to post a minimal demo focused on an issue with one of the GSAP tools. Hope it helps and happy tweening! https://pixijs.com

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it! // From height: gsap.utils.random(10, 100, true), // Is already a function width: gsap.utils.random(0, 100) + "%", // not a fucntion // To height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function width: () => gsap.utils.random(0, 100) + "%", // Convert to function Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQOGpa?editors=0010

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

Indeed without a minimal demo seeing the code in action it is hard to help you debug. That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOdJGQq

No, that is why I said: Everything is hard coded right now, because that is the easiest way to demonstrate how the logic works. I have no idea how Svelt works, but I would get the elements as soon as they are ready and grap their heights and then add that to the array.

I don't know how to get it with auto, I think that only works if you set the hight to 0 and then animate it to it's full hight, but you can easily get the height of the elements on page load and then add it to an array an then tween to the height of the current index. Hope it helps and happy tweening! https://svelte.dev/repl/3461a39638864bfca41e6f473dff87cf?version=4.2.15

Hi @Sandeep Choudhary welcome to the forum! You just needed to scope the pin: ".right" element eg pin: galleryObj.querySelector(".right"), otherwise it would always gets the first .right element. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ExJGMed?editors=0011

Hi @vexkiddy welcome to the forum! Am I missing something? I don't see any GSAP code! Again we would love to see what you can come up with that way we can better help you understand the tools, so please try to get something working then someone here will definitely point you in the right direction. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening!