mvaneijgen

2024-05-08T15:14:28Z

Hi @jaeyholic welcome to the forum!

Your codesandbox link is not working, maybe you didn't publish it yet? Personally I like to work in Codepen, just plain HTML, CSS and JS, so that I don't have to worry about my preferred library of choice throwing errors and really can focus on the effect I'm going for, but of course to each their own.

The best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.

It is probably not the effect you're going for, but maybe it points you in the right direction. This one works on click, but could also work on scroll, again everything in GSAP starts with an animation and you can then hook it to what ever you like to play that animation. Hope it helps and happy tweening!

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

2024-05-08T14:21:09Z

Hi @xMrCrunchyx welcome to the forum!

Did you know GSAP has its own matchMedia() build i which has some nice features when working with GSAP for instance doing some clean up and reinitiating code when breakpoints are met, check it out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

If that doesn't, work we would love to see a minimal demo, so that we can take a deeper look at your code in action. Hope it helps and happy tweening!

2024-05-08T13:32:51Z

Yeah just use the SplitText plugin and move the one word to x: -50 and the other x: 50 and they will split. If you still need help please share a minimal demo and we'll be happy to take a look at your setup. Hope it helps and happy tweening!

2024-05-08T09:43:38Z

Hi @devdongvi welcome to the forum!

Here another topic with two different button effects shared by @Cassie, I couldn't find the exact one, but maybe some more Codepen examples get shared in the future. Seems like a fun challenge though! What have you tried already? We love to see what you can come up with, that is the best way to learn the tools! 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!

Tuesday at 09:52 AM

It is important in which order you create ScrollTriggers, certainly when things are pining! You can manipulate this if you use refreshPriority, see docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/

Quote

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

I'm not completely sure what you want to do, but be sure to keep in mind to remove ScrollTrigger from your setup, to see if your animation are doing what they suppose to without ScrollTrigger, so that you can debug one part at a time. This make debugging a lot easier.

If I reverse the order of your functions, things look to work VideoSectionAnimation(); ScalingBannerWithProducts(); but again I'm not sure what suppose to happen. Hope it helps and happy tweening!

See the Pen wvbwMeN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Tuesday at 09:17 AM

Hi @jeycraz welcome to the forum!

The best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.

I've written a guide how you can create any card stacking effect using a simple base. I think your struggle here is that you have to many ScrollTriggers controlling to many animations. As you can see in my post below all this can be done with just one timeline and one ScrollTrigger, check it out!

Check it out here a modification on the logic shared in the post with your animation requirements, showing you how you can implement something like this. I've written the tweens out by hand, doing this allows you to see patterns emerge which will make it easier to convert this to dynamic code. Hope it helps and happy tweening!

See the Pen RwmbrbL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Tuesday at 07:48 AM

The past few weeks there we're an influx of post using ScrollTrigger and the ScrollTo plugin, which made me write a post how the logic behind it works. Also check the second post by @GreenSock who shares some great helper functions! Hope it helps and happy tweening!

Tuesday at 07:45 AM

Does this helper function help SplitText lines in nested elements https://gsap.com/docs/v3/HelperFunctions/helpers/nestedLinesSplit/?

Tuesday at 07:42 AM

Our own @Carl has a great tutorial on that. The first video is for creating staggers and the second one how to seamlessly loop that animation. It is not simple, but with this explanation I think you'll manage

When I'm building complex animation I always fall in the trap of optimising things way to early and some times it is just better to write things out by hand and only when it works optimise that code. I've written a post based on that, maybe it helps you.

Hope it helps and happy tweening!

Saturday at 01:07 PM

I think the following tutorial by our own @Carl will be helpful. Hope it helps and happy tweening!

Friday at 04:28 PM

Hi @claraapta welcome to the forum!

As with anything in GSAP everything starts with an animation, so if the animation is not working it will never work on scroll. For now I've disabled ScrollTrigger in your demo, but be sure to enable it again when you think everything is correct. In the demo below we just get the total width of all the sections add together and use that as your x value. Bonus point for using a function based value https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values so that it gets recalculated on resize.

Hope it helps and happy tweening!

See the Pen XWQLBzJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Friday at 02:01 PM

Hi @Sam Tremblay, sorry that you feel that way. We love to help everyone here on these forums and not having an easy way to thinker with the code makes it that much harder to help you. That is why we ask our users for a minimal demo, it is a way to help us, help you! I get it can be frustrating when you're on a dead line and something is not working. My workflow debugging this would be to remove all unnecessary code and remove the ScrollTrigger logic and just see what the animation of the boxes are doing, but there is just no way for us to modify the code on a live website and thus no way to help you debug.

I personally also work in PHP, but all my animation start out on Codepen. I find it just so much easier to have a place which is just pure HTML, CSS and JS and worry about the logic that needs to happen, so when in comes time to integrate it in my framework of choice I can easily fall back on the basic version that I know is working, bonus you have an easy version you can share if things are not working!

Again we love to help, so hope you'll be able to create a minimal demo, because it looks like a cool animation!

Friday at 01:30 PM

Hi @simran_evoco welcome to the forum!

I've just written a post how you can do this using the ScrollTo Plugin, check it out. Hope it helps and happy tweening!

Friday at 01:29 PM

I see a lot of people hung up on creating buttons to scroll to a particular point on a page while using ScrollTrigger. Of course GSAP has you covered with this! See the ScrollTo plugin! But as with everything in GSAP it starts with an animation.

First of please read my post about creating a stacking card effect, it will be used for the bases of this post

So as usual everything in GSAP starts with an animation, so you first have to have an animation before you start doing anything on scroll, first focus on creating the animation you want to happen and when that is done we can worry about enhancing it with some scrolling

See the Pen WNWqEYx by mvaneijgen (@mvaneijgen) on CodePen

If you’re happy with the animation you can add some ScrollTrigger logic to see how your animation works on scroll.

See the Pen OJGevrB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Ok, now for the reason you’re here. How can we have a button that scrolls to a certain position on the page? That is where the ScrollTo plugin comes in, if you check the docs (https://gsap.com/docs/v3/Plugins/ScrollToPlugin/), the most simple setup is to just animate to a pixel value, let’s see how that works!

The below example scrolls to 1000px, simple enough but I hope it illustrates what it is doing under the hood, because scrolling to a specific section will be nothing more than getting the pixel value you want to scroll to and using this as the value in the scrollTo: property!

See the Pen JjVQOyK by mvaneijgen (@mvaneijgen) on CodePen

But now we want to scroll to the third card in the animation, how can we do this? We know the total scroll distance of the ScrollTrigger because we define that in the start and end properties, right now the ScrollTrigger starts on the top of the browser and has a distance of 4 times the current window height (end: `${window.innerHeight * 4} top`) and we have in total 4 animations! This means each slide animates over the hight of the window, so what do you think will happen if we animate to the current window hight times 2? Well let's see!

See the Pen BaEgwoz by mvaneijgen (@mvaneijgen) on CodePen

It animates to the third slide! As you can see I’ve wrapped the code in an arrow function, this indicates to GSAP that we want to recalculate this value if ScrollTrigger.refresh() is triggered, which happens on a page resize, because when the page resized probably the height of the browser changes, so we need to get new values.

If you do not use a function based value you indicate to GSAP that it should not recalculate it’s values and can use its cached values. If you want to read more please check out the docs https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values

Great we’re done! lets add some more content to the page and everything will be working just fine! But wait!? Why does it now only scroll to the second slide? Before it was scrolling to the third slide. Well all ScrollTrigger is doing is animating to a specific pixel value and because we’ve add another section before it, the scroll distance will be different. What you can do in this case is add the ScrollTrigger start value to the calculations, so instead of just animating to twice the window height, we animate to tl.scrollTrigger.start + window.innerHeight * 2, just try it your self and you’ll see it will always scroll to the top of the ScrollTrigger + twice the window height

See the Pen BaEgwoz by mvaneijgen (@mvaneijgen) on CodePen

Ok, I hear you thinking, but I want to animate to each slide, and what if my scroll distance changes then I need to update my calculations every where! You are totally right! And the folks on the GSAP team has thought of everything! So what you can do is add labels to your timeline and then scroll to those labels! This can be as simple as scrolling to a specific label eg tl.scrollTrigger.labelToScroll("label3") or this can be be fancy like the example below by getting the next label in the timeline and scrolling to that, I hope you see that you can as easily scroll to the previous label.

See the Pen gOyNeqj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

If you don't have labels in your timeline you can also do some math to scroll to a specific point in a timeline. The progress of a timeline is always between 0 and 1, so what you can do is get the end and start values of you ScrollTrigger and then subtract and then multiply that by 0.5 to that the halfway point of the animation or any other value!

Again to emphasise all ScrollTo need is a pixel value and it is up to you to get the correct value. GSAP gives you all the tools you need, but it is for you to figure out what the math is behind the logic you are looking for!

Hope it helps and happy tweening!

See the Pen poBXLKX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Friday at 12:45 PM

1 hour ago, maciei said:

my animations are flashing or for example, the element that should be x: -100% is visible (for literally like 0.00s

That is called Flash Of Unstyled content eg FOUC, check out this post https://gsap.com/resources/fouc/

Best is to have GSAP fire when everything has loaded especially images, fonts ect, because if you use ScrollTrigger the hight of everything is really important.

Sadly we don't have the time and resources to provide free general consulting, but your code looks fine. I would not worry about it the only thing I can see is that you use x: "120%" and especially for percent based values we have xPercent: 120, same as x: `${distance}px`, I would write it like x: () => distance, this will get distance again if ScrollTrigger.refresh() is called (which happens on page resize) read more about function based values https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values

Hope it helps if you need further assistance, please provide a minimal demo, so that we can take a look at your code in action. Happy tweening!

May 3

Hi @Robin Dhama welcome to the forum!

I'm not completely sure what all the code is doing in your setup. It seems fairly complicated for such a simple animation. Good to keep in mind is that all ScrollTrigger is doing is animating your animation on scroll, so I recommend first focusing on the animation at hand and only if that is correct adding ScrollTrigger.

Right now I've removed some of your logica and just add one timeline with one ScrollTrigger, if I resizes this logic everything works as expected. For some reason the text in the red box has disappeared? Also a good rule of thumb is that you should never animate your trigger element, in your case you animate the element box, this then can't be the trigger element, because you are moving the box the calculation ScrollTrigger needs to do will never be correct.

I’ve placed some comments in your JS to better explain things, please be sure to read through them! For instance you had a gsap tween that set the box to scale: 0.3, but you can just as easily just use a .from() tween in your timeline and then the box will scale to it's initial value eg 1. Also I recommend taking a look at the ScrollTrigger docs and just read through some of the properties and what they do. As you can see there is no delay property in ScrollTrigger and also no duration. (docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/). I find the following video really explains how to work with ScrollTrigger really well, and how durations work when working with ScrollTrigger

Hope it helps and happy tweening!

See the Pen dyLBVzb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

May 2

5 minutes ago, Serban said:

but I have to find a way to make each line move down and so to simulate the infinite grow animation while the user scrolls. Seems a little complicated, not sure yet what is the logic behind it. But probably while it grows (scales up), it also moves down slowly, so that the 1st row will continue to grow from 0 to 1.2 or 1.5.

To me it seems there are around 11 rows on the site you share and some of the rows are already at some scale and other start from 0, so it looks like they keep growing, but there is just a finite number of rows. I also think they just scale to a final number of 1, but their initial size is just bigger then what is in my demo, but you can easily fix this by just changing the layout via CSS.

11 minutes ago, Serban said:

I prefer GSAP over canvas

These are not mutually exclusive, canvas is a way to draw things on the screen. GSAP doesn't draw anything it just animaties things that are a ready drawn on the screen.

I've updated my pen a bit to include more rows and have more start animating from 0, to me this seems like on your reference (except they have them over lap more, which is just CSS)

See the Pen zYXVYdr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

May 2

Hi @Serban welcome to the forum!

There is no GSAP code in your demo!? If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

When working with GSAP it is good to remember that everything starts with an animation, so if you want to make something to animate on scroll it is best to first focus on the animation at hand, then when that is done it will be trivial to hook it to ScrollTrigger or something else.

Canvas always make my head spin, so I cant help you with that, but I can show you how I would build it using just the SVG elements directly. I would figure that the logic is the same if you can get the rows from the canvas element. Again this is just the animation, but there is some ScrollTrigger code commented out, so you could enable that to see how it would work in scroll. 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!

See the Pen zYXVYdr?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

May 2

Hi @Sharath Lingam welcome to the forum!

Sure you can, but the question is how much time do you have and what is your skill level? The beauty of GSAP is you can build anything you like! So there is probably a way with the tools GSAP gives you can build your own inertia logic, but that means you also have to do all the debugging and all the trouble shooting your self, so the question becomes how much time do you want to spend figuring this out?

Our reply will be "just use the inertia plugin, there is a lot of time spend figuring it all out, so that you don't have to!". Your question feels a bit like asking a carpenter if you can borrow all their professional tools, but without their tools they can't do their job...

But again feel free to roll your own logic, there is nothing wrong with a bit of coding and figuring things out by your self. In theory inertia is just animating something and slowly getting to a 0 value that feels correct, but I think when you do go the roll your own route you'll come across a lot of hurdles that will take a lot to figure out. Hope it helps and happy tweening!

May 2

Hi @Manoj Khatri welcome to the forum!

Check out the post by our own @Carl

May 1

You still have transition: all 0.25s ease; in your css which is conflicting with your JavaScript animations. highly recommend removing this and never to use transition: all 0.25s ease! Just change all to the property you want to transition eg transition: opacity 0.25s ease;

but glad you’ve solved your issue. Happy tweeting

May 1

I'm not sure what the question is, this is the same as my previous pen right, just with slightly different code. All the scrollTo plugin is doing is animating/scrolling to a point on the page, so lets say your element starts at 3000px you can feed in the value 3000 or like below get that value dynamically through the variables that are build in to the tools

See the Pen WNWByjX?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

May 1

Have you seen ScrollTrigger.batch() https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/ Hope it helps and happy tweening!

May 1

This seems weird to me, but with each reply please link to the demo you're working in so that we can take a look at the code inaction

 let benifitsTrigger1 = gsap.timeline({
    scrollTrigger: {
      ...
      animation: gsap.to(photos[index], { yPercent: 0 }), // ScrollTrigger is already in a timelie, so it cant also target another animation 
      ...
    }
    allSt.push(benifitsTrigger1); // This can't be inside the timeline object
  });
});

What is the issue you're trying to solve?

May 1

Hi @MrBumblebee welcome to the forum!

The most powerful tool in GSAP is the timeline! You can add multiple tweens on it and if you got your desired animation you can let ScrollTrigger control that whole timeline. You had a .to() tween, but you needed to set CSS to get your boxes in place it is always best to let GSAP handle all the transforms. So in this case (this is true for most animations) use your CSS to set your elements to be in the position where you want them to end when the animation is done, then you can use a .from() to have GSAP put them at the correct place. As you can see this now works perfectly (on any screen size). You can see that I've moved your ScrollTrigger logic to the timeline and it is commented out you can enable it to see how this would work on scroll.

I’ve placed some comments in your JS/CSS to better explain things and also below some notes that are important to understand, please be sure to read through them!

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!

See the Pen JjVqpGq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

Please also read the following:

Quote

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.

Quote

The best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by mvaneijgen