mvaneijgen

@DavidLew a small tip: take a look at `.from()` instead of `.to()`

Cool. I love to help but try and fork my pen and try your luck. Just try and get something working and when you get stuck post your pen with the not working code, then we'll point you in the right direction. I'm not trying to withhold information, but this is the way how I learned and if we see how you think it's easier help nudge you in the right direction.

I've created an arrow function of your matchMedia query and that seems to work.`this.` will otherwise be scoped to its parent function "(min-width: 800px)": function() { "(min-width: 800px)":() => { https://codepen.io/mvaneijgen/pen/MWQbQXg?editors=0011

Hi @DavidLew, welcome to the forum! I had a bit of trouble reading your code, so I had to remove a lot of code to make it easier to explain. Instead of `:after` and `:before` elements I've just created `.box` elements within each text element, these are much easier to animate with GSAP. Also you are now using GSAP so no need to create complicated CSS animations, let GSAP handle that for you! If you want to use scrollTriggers the best thing to do is create a timeline. Then within that timeline create your scrollTrigger. This way the whole timeline will be played when the ScrollTrigger fires What I now did for your demo is styled each box to be black and overlap your text and as soon as the ScrollTrigger fires scale those `.box` elements to to zero. I've add a `stagger: 0.3` to the animation so that each `.box` will animate `0.3` seconds after the previous one. If you want them to animate all at one remove the stagger from the code. To show you how you could add more animations to this timeline I've add an extra animation that will move the text 100px to the right after the boxes are finished animating. This of course you can remove (or tweak) I really recommend starting a few GSAP tutorials to get a better understanding of the basics of GSAP, there is a lot of great content on Youtube. I would recommend SnorklTV as a place to start. https://codepen.io/mvaneijgen/pen/RwQoQwp?editors=0010 Hope it helps! And if you get stuck please feel free to come back here and ask more questions.

Due to your CSS your SVG was locked to the height of the `#wrap` and thus cut of your `circle` element. The SVG also had no `z-index` so it was lower underneath your video. I have removed and add some CSS to get the circle to show on top of everything and highlighted some elements to show you where they are. https://codepen.io/mvaneijgen/pen/OJQRYZa

Have you ever used Stagger? This you can just give an array of all your elements you want to animate and it will calculate the logic for you, no need to map over specific items, just give it `document.querySelectorAll('.lines')` and add the `stagger:{}` object with your parameters. But this is all pseudo code, a minimal demo would really help.

I've looked at your demo and I never saw anything like your screen shot. I did add a few tweaks to your animation. Instead of animating the whole `background` object I've moved it to only the gradient part with `background image` (`backgroundImage`), because just `background` is a short hand for a lot of properties (see MDN docs). Also I change the second color to just `transparent`, don't know if that will change anything. https://codepen.io/mvaneijgen/pen/wvyzOyK?editors=0110

I didn't get why there where two ScrollTriggers in your demo, so I removed one and combined the logic to just one. In your timeline I've .add(`label${I}`) which adds a label to a point on the time line and if I'm correct this is the place to which you want to snap. After that it was just a question of adding `snap: "labels"` to the ScrollTrigger object and now it will snap to those labels. There are a lot more settings within snap, but you can check the docs for that https://codepen.io/mvaneijgen/pen/WNMwoMr?editors=0010

What have you tried already? You're linking a pen of someone else the least you could try is fork it and modify it a bit, then when you get stuck post back here. This example does a lot with `rotationY` if you search and replace all this for `rotationX` you'll be already near your solution. Converting jQuery to Javascript should be easy, but if you want a head start you could google "jquery to js converter", these online tools probably get you 90% there. And at last I would recommend upgrading to the latest version of GSAP, here is a migration guide.

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting. It's great that you've included a codepen, but there is no GSAP in it. I really encourage you to try your hand in what you can get off the ground yourself and when you get stuck post back here with a specific problem you're facing. There are a lot of demos you can find here there is probably one that kinda does what you want, I'd suggest starting there.

Why can't you reproduce it easily on codepen? Does the bug not show in codepen, because than maybe something else is interfering. You could try changing your `right: 5,` animation to something more performant like `x:` or `xPercent:` . Also `background:` is a shorthand for a lot in CSS feature, if you just want to animate the `background-color` you'll be better off animating `backgroundColor`

I would love to see a minimal demo and you are talking about `.batch()` did you know that is a function in ScrollTrigger? Check out the docs here docs. Seems like that could be a solution.

I see you are using the old syntax of GSAP. If you can I really recommend upgrading to the latest version, see for tips. Also can you make a minimal demo to show us what you are trying to do? It can just be some colored divs because right now I have no idea what `up`, `down` or `winsize` is or does, so it's hard to give you a solution.

It's probably not to do with you GSAP files as you can see they load fine in your console. It has to do with how the content is loaded and that is a mystery to us, because you're the only one that can see that. Again, ask your theme or page builder for support.

Your issue is probably something to do with how the page is build. If you just use PHP there should be no issue with targeting HTML elements with GSAP. I've looked in to "action-created-blocks", but I can't find anything online about that. I have the feeling you are using some fancy plugin that loads your content via Javascript and thus your GSAP code is loaded before the elements are loaded. I recommend talking to support of your page builder or theme oir start by animating something simple and debug from there.

The only thing I can see from what you've shown is that the elements you are trying to animate are not on the page. GSAP target .image-content not found. This means there is no element called `.image-content` and that is correct your screenshot only has really big text, but no image. So it seems GSAP is working fine, but you're missing the HTML/PHP content to go with it.

That's great! Show us the demo and will let you know what went wrong!

@Aldrin `snap` can be an object where you can define in detail how you want to animate the snap. See the docs snap: { snapTo: "labels", // snap to the closest label in the timeline duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity) delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping ease: "power1.inOut" // the ease of the snap animation ("power3" by default) }

I've never worked with a switch statement before, so forgive me for not using it. What you want is to have a trigger at each section right, so the easiest way is to just crate a scrollTrigger for each section. Then you don't need to calculate anything weird and can just use the top and bottom of the section you're working on. I've just used some random gradients colors, but it shows you it working. I've used a wrap function this loops through an array and it doesn't matter if there are 10 sections, it will just keep looping the the array of the three I've set. https://codepen.io/mvaneijgen/pen/BaYBGOa?editors=1011

I've created a timeline instead of just a `gsap.to()` tween and add the dot appearance to that timeline, gave it a relative position parameter of `-=0.3` which means it will appear 0.3 seconds before your lottie animation finishes. https://codepen.io/mvaneijgen/pen/VwQZVjx?editors=0010 The default tween value of GSAP is 0.5 seconds, this doesn't really matter, because you're using scrollTrigger with `scrub: true`, but the position parameter still works like that. So the dot will be visible on 2/5 of the scrollable height, if that make sense.

I see you're not the original poster. I would recommend just create a minimal demo with what you can get working, nothing fancy just some colored divs and start a new topic when you have that. Making it dynamic or not doesn't really matter for scrollTrigger, it just has to do how you code it up.

Here is a demo that has a normal scrollable div on top and bottom with a ScrollTigger animation in between. Be sure to check all the demo's on https://greensock.com/st-demos/ there is probably something in there that closely matches what you are looking for. https://codepen.io/GreenSock/pen/oNjgEjm

You can and empty `tl.add(() => {}, "+=10")` with a position parameter of the value you want. I've also seen people use a `tl.set({}, {}, "+=10"), it's what ever you prefer. Here is a demo: https://codepen.io/mvaneijgen/pen/WNorJoX

I was also not sure what `{reversed: true}` did (there is nothing in the docs), but I think I have figured it out. It does nothing, but trick the timeline in thinking it has been played and sets a variable too `true`. So it doesn't set the animation backwards, otherwise in your example the block should have moved `y: 200` and it doesn't Adding a `!` before a variable will flip it state, so what is true becomes false and because the initial value was set to `true`, `!tl.reversed()` will become false on the frist run, so the code will become `tl.reversed(false)` and will play from it's not reversed state. I've modified the example to log out the values to visualize the values changing. https://codepen.io/mvaneijgen/pen/abEevBG?editors=0011

And if you don't want the flash of green in-between you just have to flip around the position parameter from ">" to "<" than the second tween will start at the same time as the previous tween! https://codepen.io/mvaneijgen/pen/zYpgGZB?editors=1010