mvaneijgen

Hi @jeek90 welcome to the forum! I advise you to start your own topic instead of opening up a topic from 2 years ago. We have a really handy pen on Codepen that loads all the GSAP plugins where you can just check them all out and use them freely (even the paid once!). See the JS tab settings. https://codepen.io/GreenSock/pen/aYYOdN If you want to work locally, we have a really handy installation guide over at https://greensock.com/docs/v3/Installation with even a visual installer helper! If you're just testing things out I advise you to use the CDN tab and just check the plugins you want to use, here is a selection with the core and ScrollTrigger selected https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger, just paste this somewhere in your HTML and they will. If you're just starting out Codepen is a great place for that! No weird gotchas, just jump in to the code directly and you can share everything you make with anyone! Hope it helps and happy tweening!

I had one div too many in my setup which made the scope not correct, took me a while to debug, so the pen looks different now. The delay was in the original animation, so I didn't know if that was part of it, I can't really figure out how that works, but it looks like you want a seamless loop right? Check out this amazing tutorial from our own @Carl which has a really smart way of handeling seamless loops. https://codepen.io/mvaneijgen/pen/KKxrbJG?editors=0011

Why not create everything in the same container and just to a .forEach() loop for each modal + button combo? The modals are position: fixed right when you open them, so they are not part of the flow anyway, so they don't interfere if they are somewhere random on the page. As I suggested in my previous post: Again I don't have time to debug everything right now (the close button is not clickable at the moment, fixed), but this logic is in my eyes the most simple solution. and it will not matter if you have 2 modals or 200 modals, all the javascript is scoped to that particular modal in the loop. https://codepen.io/mvaneijgen/pen/NWLebxB

What is it you want to pin? I'm no ScrollSmoother expert, because I get sea sick looking at those kinds of websites, but I know there is some logic you get out of the box, if you don't define a wrapper, but it is always better to define those your self. In your example don't you want to pin the .progress bar? Instead of the wrapper it self? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWqzqpB?editors=0010

Hi @Krix welcome to the forum! This demo should provide some insight on how to use the Observer plugin and only when it is done animating move to a normal scroll flow. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/oNdNLxL?editors=0010

Hi @alechance the solution @Rodrigo has provided is wha you need. I don't have time to refactor you're whole setup, but you need to create an animation on page load and set that to paused: true and then in your click handler .resume() (or .restart() if you want it to start over on each modal open close) the timeline and .pause() it again on close. Right now you have loops in event triggers with in there more loops with more in event triggers, is a logical nightmare to keep track of. What I would do is create one forEach loop for a button/modal combo and scope all your logic to that particular combo in the loop. Here is a working demo with a lot of CSS/JS removed/moved, to get something working, but to get this in a logical correct state it will need a lot of refactoring. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yLxRWXy?editors=0010

Hi @ThomasDeer I'm not completely sure what it is you want your animation to do, what I do recommend is to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. If your animation is not doing what you expect, your ScrollTrigger will defenently not work. What I would do is first layout your elements with CSS, where you want them to start or end and then you'll only need a .to() or .from() animation. .fromTo() animations are great, but you'll rarely need them. So if you want the images to always move to the middle, I would then stack them all on top of each other with CSS and them move them .from() some position and when they need to move up .to() some position. I sometimes also make the mistake of trying to optimise my code before having something working, it is hard to optimise code before it is doing what you want. I would personally first write it out and then you'll see pattens emerge which you could replace with a loop or a stagger. Please try your hand at my pen below without the ScrollTrigger and post that with an explanation of something like: "my image is not moving up when I expect it to at line 19" https://codepen.io/mvaneijgen/pen/XWPxGwx?editors=0010

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. I didn't have time to fully write out the timeline, but you want to animate some things right? Then I would always start with a timeline and just start out laying out the animations. You could start with my base with the fancy position parameter's, but if you really want to learn I would start out by just handwriting each animation to see what really needs to happen. Your first .panel has a class of .first, but give the next one .seconds, .third, ect and write your animation that way. Doing it this way will make it really clear where you can put a loop and need to do some fancy staggers. I sometimes make the mistake of starting out with the fancy staggers before I have working code and then it always is an up hill battle, it is always better to get something working first before optimising. Again just remove ScrollTrigger it is just in the way at this point and focus on the animation you want to happen. https://codepen.io/mvaneijgen/pen/poOxqGY?editors=0010 When you're ready check out this video by our own @Carl really great tutorial on how to setup these fancy position parameter's. Hope it helps and happy tweening!

Hi @AlecV you're in the Club Greensock: SimplyGreen tier. The next tier up ShockinglyGreen has access to the same tools you have plus ScrollSmoother, MorphSVG, Inertia plugin, SplitText, MotionPathHelper and GSDevTools. See the table on the following page. https://greensock.com/club/ you can probably just upgrade your account if you want access to the other tools.

I just wanted to jump in here, you don't have to use jQuery you can always just use vanilla JS if your jQuery version has a bug in a certain function. If you still have a bug, please share a minimal demo with that particular bug you're facing.

I'm just going to jump in and give my two cents, I'm not a Flip expert, so maybe there is a way of doing this, but seen the docs states, I think it is really for animation between TWO states, not multiple. https://greensock.com/docs/v3/Plugins/Flip/ If this is indeed the case I would create a .p-bg element for each block and hide the first one when the second one will animate from p2 -> p3, then hide .p-bg of p2 when animating from p3 -> p4, ect. It will visually work like you expect and for the visitor it will just look like that one element is jumping around the page, while in reality it is a new element each time. Hope it helps and happy tweening!

You can log this in the function to get all the values or the draggable instance. See the Draggable docs for more info, onDrag: Function - A function that should be called every time the mouse (or touch) moves during the drag. Inside that function, this refers to the Draggable instance (unless you specifically set the scope using callbackScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX, pageY, target, currentTarget, etc. This is only called once per requestAnimationFrame. https://codepen.io/mvaneijgen/pen/OJoBNMa?editors=1111

Are there settings in that plugin? Somethings that could cause issues is if Javascript gets minified, loading JS gets deferred, images get lazy loaded.

I see what you mean. What I would do is enable the markers on the live site and see what they are doing. (markers: true, on the ScrollTrigger object or the following code to enable makers for all ScrollTriggers) ScrollTrigger.defaults({ markers: true, }); What I can gleam from your code and personally would never do with the .js-reveal-img You are animating the trigger element, ScrollTrigger uses this element to do all its calculations, so if you move it these calculations could be off. tl.from(container, 1.5, {}) this is old syntax (nothing major, but in the new syntax you define the duration in the object {duration: 1.5} I'm not sure if this is valid delay: -1.5, I would use the position parameter to have elements start at the same time. start: '0% 100%', end: '100% 0%', this should work, I think. But I would try swapping it out for "top bottom" "bottom top" Are there any errors you're getting? Anything else you could provide about the project to could help us help you debug? Using React, Vue.js? Maybe a screen recording from the live site vs the local site and/or a demo page with just one problematic animation that is not working, so that we can focus on one bug at a time. De site ziet er goed uit trouwens!

The .fromTo() tween are great, but you will rarely need it. If you know where your element is and where you want it to you can just use .to() and .from() and because these are just simpler in nature they will behave them selfs better. It is not to say that .fromTo() is bad, but you have to know what you are doing to prevent these kinds of bugs. Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/xxaadrp?editors=0010

Hi @ektorp why not use the snap property of ScrollTrigger it self? See the ScrollTrigger docs this is just the simple snap true, but there are loads of settings you could change, you also want to set the trigger to be the top of the viewport + the height of your "page header". Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOvpGbW?editors=0010

Hi @Novaliz welcome to the forum! Happens to me as well! I usually then go to the Installation docs and copy the code from there, to be 100% it wasn't a spelling mistake. Happy tweening!

I wouldn't think having two copies of the same elements (which are just some text blocks) would impact performance much. What I do see is that you're using the following properties which do impact performance: bottom, top, translateY (All these can be replaced by y: or yPercent) and animating width is also something I personally like to stay away from. What I personally would do is take a step back from your whole project and just focus on the animation, remove React, just use simple HTML, CSS, JS (on a place like codepen) and just keep forking your animation until you've got something you're happy with. I would take it even further and grab pen and paper and draw out a story board with notes what elements/properties you're going to need. But the copy of the element with to clip-path's seems like a great start. The white lines are just simple divs that move at the same rate as the clip-path. In the simple demo, remove the click handle, just focus on the animation and maybe use GSDevTools for quick debugging, if you're stuck, just post back here! Looks like a cool animation btw! 🔥

Hi @JustHugo welcome to the forum! Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a simple version of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code. If you're using React, just fork the StackBlitz template and you're off to the races. Also be sure to read this post to be up to date how to use GSAP with React, there are some gotchas!

I think you're not going to find that. The beautiful thing about GSAP is that you can build everything your heart desires with it, but it's your creativity that needs to connect the puzzle pieces. Flip seems like the perfect fit for it, but how that would work for your setup is where you come in as the developer. All I can recommend of is our own @Carl's YouTube channel https://www.youtube.com/user/snorklTV/videos I've personally watch those videos (and did his GSAP courses) multiple times and every time I gleam something new from it. It will not teach you "how do I fix my specific problem", but there is a lot of general knowledge to gain from it that you could adapt to your project. I keep coming back to this tutorial, but it is just so elegant and I've never build something exactly like it, but just the general approach I've used in several projects. What I would do is create a simple version of your project in Codepen and just try a view solutions (eg Flip) and just keep iterating, that is how I like to work and usually at version 20 I've something I could maybe use in my project. And if you're stuck you can ask for help over here with a minimal demo. Hope it helps and happy tweening!

@dogzzz what have you tried yourself already? Adding a new block of text seems to just work out of the box. Right now this is build with a fancy loop, but if you want more control ditch the loop and manually write your timeline with the timings you want and some position parameter sprinkled in. tl.to(text1, { opacity: 0 }, 1); tl.to(text2, { opacity: 1 }, "<"); tl.to(text2, { opacity: 0 }); tl.to(text3, { opacity: 1 }, "+=1"); // Take a look at the position parameter ... ect My recommendation would be to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Also note that ScrollTrigger converts the total duration of the timeline to the total scroll distance, so to get exactly 20% or 60% will require some maths, if a timelines total duration is 10 seconds 20% would at the 2 seconds mark. Hope it helps and happy tweening!

Hi @DaCodeWiz welcome to the forum! I can't read half the code you posted, because the text is too small. Creating a Codepen demo isn't that difficult, just copy the GSAP code and create some coloured divs for the elements you're animating. Taking a step back from you setup and first trying out things without all the baggage of Vite React is a great way to get off the ground, on Codepen you can just try 20 things and see what sticks. And you'll find that you'll solve 90% of your own bugs by making it simple. Also if you're working in React be sure to use the gsap.context()

@Levin Riegner nice you've should your own problem! Did you know you can also feed a GSAP tween an array? Because all your tweens have the same values. tl.fromTo([parallaxImage1.current, parallaxImage2.current, ..., parallaxImage123.current], { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); And when working with percentages it's better to you yPercent: 100 or yPercent: -100. Hope it helps and happy tweening!

If it works it works. Why solve problems that aren't there? By using it you'll find new problems to solve, but I would solve them as they arise and not endlessly try to optimise code without using it first. Two notes: animating top and marginBottom are properties that are less performant. And you could give all the elements that you are tweening with GSAP a css property of will-change with the properties that you know are going to change.

I've created a class .show and when that is triggered it will play an animation on the .fixed element. That animation is paused and hidden with CSS, so that it doesn't show on page load. Then it is just a question of checking where you want your triggers, I've set them now both to the bottom of the view port, so as soon as the top of the element hits the trigger it is shown and again when the end is triggered it is hidden. And I do this for both the enter, leave, enterBack and leaveBack. I've made it a separate timeline that gets controlled by multiple ScrollTriggers, you could probably create the ScrollTrigger in the timeline and have each ST control a new timeline, but this seemed a better way of handling it to me. Also instead of classes I've created a timeline animation because well GSAP and that is what we're all about 😝 Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjaZjYj?editors=0010