mvaneijgen

Currently you have a ScrollTrigger for each card which needs to pin based on its position. This is going to introduce some overhead on all the calculations that needs to be done. Personally instead of building this using scrolling I would build this via an animation, then you have just one ScrollTrigger and one timeline to build this whole effect and seen that it will use 75% less ScrollTriggers it will portably be a lot smoother to. Check out my post on how to create a stacking card effect The logic of the second to last pen gives you a good starting point to build your animation. A good thing to note is that in these examples nothing is really scrolling, things are just moving on the y-axis, which when hooked to ScrollTrigger will give the illusion of scrolling and because nothing is scrolling and just animating that is where you get the smoothness you're after. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWxgQbV

Is there or can you add a class to the page when it is publish? I don't use Webflow, but I would figure they have something for that? Or check if there is some element on the page that is only visible when you're in edit mode. Otherwise I would ask them, this is not really a GSAP issue or at least there is nothing the GSAP code can do to fix the Webflow editor.

Hi @AK_99 welcome to the forum! Let's take it one step at a time. Check out my post about creating a stacking card effect if you still need help after that post here your Codepen with what you've tried. Hope it helps and happy tweening!

Do you have a minimal demo of this?

Yes, then just make that section stack on top of the current section and animate it from off screen to where you want it. Eg something like this, I've set your trigger to the <main> element and add a .from() animation to the #our-vision section to animate from off screen to on screen. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PoMbPNw?editors=0010

No, I don't think I fully understand what it is you want. Keep in mind that ScrollTrigger is just animating something on scroll so first create the animation before you start thinking about ScrollTrigger. I would just build all the tweens you want an then add it all to one timeline and have ScrollTrigger control that timeline. You can move things on the y-axis (from the bottom) to create the illusion of scrolling that is in most cases the easiest way to have things work on scroll, but then nothing is really scrolling, just animating. It is always a good idea when things start becoming more complex to get out pen and paper and first sketch in a story board before jumping in to coding everything from scratch, at least that always helps me.

Do you have a minimal demo? That will make it easier to understand what you're looking at and thus help you debug the setup.

Do you maybe mean the GSDevTools? You can find that one here https://gsap.com/docs/v3/Plugins/GSDevTools/ CSS and HTML are really important with GSAP, so there is no magic "make this work for all sections on a page" you have to structure you CSS and HTML so that it is all positioned on top of each other and then you can create a timeline with all the animations you want to happen for all the sections. Or am I mis understanding you? It always helps to create a minimal demo what you're looking at so that it is easier to understand what is is you have trouble with. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdNrqKP?editors=0010

Hi @Shahil Mishra welcome to the forum! Check out my post how to step through a timeline using the observer plugin. This way you can make any animation and have it react to scroll. With an animation it doesn't matter if you go horizontal, vertical, diagonal, just focus on the animation a you're golden! Hope it helps and happy tweening!

I've given the element which house all the text a class called .tweenMe and used that in the ScrollTrigger tween. as you can see there is no conflict now, because you're animating two different elements. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdNObQo?editors=1010

You can block the scroll when animating and then release it when onComplete of the timeline. Or another solution could be to wrap your elements in a sacrificial div and then in the scroll animation target that sacrificial div than you solve the issue of targeting the same element in two different timelines which is always going to cause issues. For the scroll to anchor "#id-to-section". I would look into the ScrollTo https://gsap.com/docs/v3/Plugins/ScrollToPlugin/ Below a reply by Jack with some great helper functions that could help you. Hope it helps and happy tweening!

Hi @subham0889 welcome to the forum! Glad you've solved your own issue. It is always a good idea to have the install helper open to see if you're missing a step https://gsap.com/docs/v3/Installation Happy tweening!

Hi @Daniel Aguilar welcome to the forum! I've add a higher z-index to the text and set the greyscale on the .wrapper__info, so that they are on the same level in the document. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEgpNzG?editors=0100

Yeah then grap all the parents in a loop as in the codepen and then you could use the gsap.utils.selector() https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() to scope to the current parent and then do the same logic as the initial pen by getting all the h1, h2, h3, h4, h5, h6, p, ect and then add a stagger to that animation and set the trigger element to the parent. I think you're there then! Hope it helps and happy tweening!

I would then do something like this. Just a loop through all your elements you want to animate and then creating an animation for each. You then only need to do something custom for the elements that are already in view on page load, because this will only animate in sequence for things under the fold. You could also abstract this more by looping through your .history_split-wrapper's and then targeting all the h1, h2, p ect in there and then you can do more of a stagger, this would also be better because it is better to not animate the trigger element it self, but this is just a quick demonstration what is possible. Also note that this is mostly plain Javascript and not so much GSAP, so you would do well on bushing up on what and how Javascript works. https://codepen.io/mvaneijgen/pen/abemqmw?editors=0010