Leaderboard

Sure, you're welcome to share your solution here. It may help others who stumble across something similar. Glad to hear it was unrelated to GSAP.

Really appreciate you having a go! But the letters overlap which was my original headache. Thanks though

I did not include a demo because it worked perfectly in that... Anyways, I figured out the problem, and was *not* about gsap. Would be helpful to describe it and write the solution even if was because external to gsap?

I wouldn't put it behind @GreenSock that he could find a solution, but to us mere mortals, the elements generated via ::before etc. aren't usually accessible by script. You could try a workaround through changing the title attribute on the fly, and setting classes to the spilt elements (newClass parameter) and maybe do a little CSS-custom-properties rain-dance. I would jut go back to your first solution if I where you, if it's still working four you....

In the config section at the top set: BACK_COLOR: { r: 255, g: 255, b: 255 }, and set the background color in css to white....

So, I'm not a react guy, and that might be a problem, but just to confirm my guess or to prove it wrong, why don't you just console.log(animation) before you try to kill() it?

Hey there, welcome to the forums! I don't see a reason why you couldn't kill a tween - as long as you can access that variable from whichever scope you happen to be in. Let's step back to this comment first though - What was your original goal with this? Maybe we can suggest a better route to get there.

It seem to me, that you have a scoping issue. I cannot see where you create your first animation, so please provide us with a codePen or at least more of the code that's in play.

@GreenSock That's actually what I'm trying to accomplish. I didn't even realize that start: 'top' was invalid. For some reason, I was thinking that it would default to start: 'top top' Thank you for pointing out a lot of my mistakes there. I'm learning a lot from your input. I'll keep those in mind as I'm moving forward with other projects using this library. Also, it was very interesting that you could put a logic in "pin" like as you did: pin: i !== (pvItems.length - 1) ? pvItem.querySelector('.ls-section__pv-item-content-container') : false, I didn't know that this was something I could do.

I mean it's deprecated now - Microsoft declared it dead and unsupported so I'd hope not? But yeah - probably a question for the banner people.

You Sir, are a legend Thanks so much!

Ah yeah - So the reason that it's logging out panel 1 when the page is loaded is because of where the triggers are positioned. The page is already horizontally at panel 1, it just hasn't reached it vertically If you want to trigger something when you scroll vertically down to that panel you'll need to add a vertical trigger instead. All if this is possible. Why don't you give it a go? We're here if you get stuck and more than happy to point you to specific parts of the API. To recap - here are the puzzle pieces you need to figure this out - ContainerAnimation for horizontal triggering Normal ScrollTrigger for vertical triggering Callbacks to run custom logic Trigger start and end positions to adjust when the callbacks run

I'm not at all familiar with Webflow, but as a general hint, I would remind you that ScrollSmoother is an addition to ScrollTrigger and ScrollTrigger needs GSAP to run, so usually you at least need to 'paste' all three of those in your page's head, if that is the only way you can go.

Thanks @greensock! I know it's not a GSAP thing, so I really appreciate you taking the time to share some tips!

Do you want to animate the numbers based on scroll? Here is an example that does that, but with way less complicated code. https://codepen.io/mvaneijgen/pen/poLawEa

Just a little speedy payback for helping us with feedback on the getting started post ?

That's purely a browser rendering issue. Try adding this to your CSS: #smooth-content { will-change: transform; }

Hi I've just purchased the Greensock Shockingly Green package & I can't figure out how to install the ScrollSmoother in Webflow. I've tried copying the "ScrollSmoother.min.js" code and pasting it into the <head></head>. I also tried pasting it before the </body> to no avail. I haven't included a Codepen as my only issue is actually installing it. I'm new to all of this so the npm/yarn options confuse me so much. Was kinda hoping for a CDN option where I could just add the script into the header and Voila ? Has anyone actually managed to successfully install it & get it working in Webflow? Appreciate any guidance ❤️

Well, it (mostly) worked for me - but I found that sometimes it crashes.... https://codepen.io/mdrei/pen/ExEQpqY

@Cassie You are a true legend Milady (seems to be a thing around here lately...) @friendlygiraffe That thing with overlapping letters made me do a little rain-dance.... https://codepen.io/mdrei/pen/jOzZpRp

This was a good bedtime challenge. That was fun ? I don't know if I'd call this a 'good' approach though. https://codepen.io/GreenSock/pen/VwXQBmw?editors=1111

Nicely done! Always a pleasure to see you pop by ?

So what I ended up doing is create an array of all sections, and an array of the sections with dark backgrounds. Then I just check if the current section is in the array of dark sections, and adjust the styling accordingly. Thanks again for putting me on the right track @Cassie! https://codepen.io/pieter-biesemans/pen/bGvLKvV?editors=0010

Sounds very much like that old couple across the street

Legend! - thank you

My bad, your walk never ends So onRepeat is what you are looking for.

I'm not seeing any "bouncing" - can you please clarify? Usually it's pretty hard to follow things like "I want it to do A and B but not C while D is occurring" If you still need some help, I'd recommend only focusing on one piece at a time. Provide a minimal demo that only illustrates one issue, get that question answered, and then move on to the next (with a new demo). We'd love to help with any GSAP-specific questions.

I'm so confused - that's basically what my first version did. But you said "...but the video always replays/resumes when scrolling back into the trigger from the top down". So which is it? Do you want it to replay at all or never again? I think I've given you all the tools you need. You can add whatever you want in the onEnter/onLeave/onEnterBack/onLeaveBack to control the video however you please. Play it, pause it, whatever. Good luck!

Thank you @Cassie, that's exactly what I needed.

Yup, IE 11 Is dead for me., for Microsoft and largely the rest of the world. If you feel or have to feel otherwise that's tough for you.

You could / should use it on the second ticker to, just set it (using gsap.set()) to the right az the beginning and animate to totalDistance instead of to: -totalDistance (Thats just a quick glance, not a tried and tested answer...)

I found a pretty good way of doing it by duplicating the text into 2 layers: https://codepen.io/friendlygiraffe/pen/ExEQvmK Separate question really, but I would like to run split1 and split2 on one line of code. I tried [split1.chars, split2.chars] but it ran them one after the other....

Sounds like you're after the position parameter

Thanks a lot for the post! It is 6 years old, but still actual.

Hey there! There's actually a demo in the helper functions section of the docs with an adjustment to add a class to the center slide. Maybe this edit will help with your other issue too? https://codepen.io/GreenSock/pen/gOvvJee

This is amazing, what's the next step to get this on a motion path? Like this? https://codepen.io/mikeK/pen/rNmNjWB

Sure, just add an onLeave that pauses it: https://codepen.io/GreenSock/pen/OJvQRVv?editors=0010

OMG thank you so much! Sometimes when you stare at the same screen for so long you miss the most obvious things!

Sure, it's very possible with GSAP. It can animate anything that JavaScript can touch. For the scroll-based stuff, look at the ScrollTrigger and/or Observer plugins. Good luck!

You mean like this?: https://codepen.io/GreenSock/pen/gOevrrJ?editors=0010

@flysi3000 tough to troubleshoot without a minimal demo but if you're scaling up at all and there's a 3D-related transform applied, Safari rasterizes it at "normal" (unscaled) size and then just stretches the pixels. It's totally unrelated to GSAP - it's a silly way Safari is trying to "optimize" performance via rasterizing. The only solution I know of is to make sure you set the natural size large enough. So if you're scaling to 4 (400%), you should start out at a scale of 0.25 and scale up to 1 instead (and set the width/height to 4x what they'd normally be).

Thank you so much you have been very helpful! ?

There's tons of variables at play as to why this could be happening. It's overwhelmingly likely something in your webpack is misconfigured, but there isn't really a way for us to tell. Can you explain what you are doing in more detail?

I put together a little fork for you. https://codepen.io/GreenSock/pen/vYRdOpw?editors=1010 MDN docs - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask If you apply a clip path or mask to a parent element - then you can animate the children inside that. There are a ton of different combinations of different sorts of clip paths and mask and ways you can use them. I find SVG masks and overflow hidden the most useful and reliable for animation though. Hope this helps!

Waw Cassie, you are so FAST! I figured I'd ask this question in the evening, so I might have an answer by tomorrow afternoon or something. ? The mix-blend-mode cheat would be great, were it not that there'll also be sections with images and different colours than black and white. I'll have a detailed look at your solution tomorrow, but it seems to work. I'm afraid my practical case will be a bit more convoluted since I have multiple classes I'll need to be watching. But the approach seems clear to me, so the rest is just tweaking.

If you still need help with a GSAP/Draggable-specific question, please provide a minimal demo that isolates only that issue and we'd be glad to take a look.

Let's work together to clarify a few things... I don't think anyone is faulting you, @joxd, for pointing out that the user-created demo isn't fully responsive. Resizing screens appears to cause it to render oddly. Perhaps we haven't acknowledged that adequately and you didn't feel heard. We are not Three.js experts here. Most (if not all) of the issues here are related to rendering, so it's really not in our wheelhouse. We're not in a position to dig in, learn Three.js and fix some else's demo for them to make it fully responsive. But we're happy to answer any GSAP-specific questions. It may not be obvious to you from your experience in this particular thread, but this community bends over backwards to help users around here and we spend hours and hours every day trying to keep up with the constant stream of posts. It can be overwhelming, especially when so many of them end up having very little to do with GSAP. Quite a few people basically expect us to provide free general consulting services and do their development work for them or solve logic issues in their code...and they often won't even bother to provide a clear minimal demo. These forums cost thousands of dollars every month to operate, so we have to draw boundaries somewhere. We get questions that are specific to Three.js, React, Vue, Angular, Next, Nuxt, Barba, Pixi, Swiper, LocomotiveScroll, ASScroll, ScrollBar, WordPress, Elementor, and Svelte, just to name a few. We simply cannot learn all of those tools and provide full support. I'm sorry if my initial boundary-setting post came off as rude or unwelcoming. I definitely didn't mean it that way. Though you probably didn't mean it this way, your responses have come across as very disrespectful and insulting. It sounds like you felt similarly about some responses you got. So everyone got a little offended and salty here. Let's just put an end to that and give each other the benefit of the doubt. Thanks for being a customer back in 2017. We sure appreciate that. We couldn't do what we do without the support of Club GreenSock members. As a company, we place a HUGE amount of value on earning trust and treating customers with respect. One of the biggest ways we try to be there for our users is via these forums. We hear over and over again about how special this place is, how it is warm and welcoming, etc. It has taken years of very intentional effort to cultivate that. We don't have big marketing budgets or corporate sponsors - we simply focus our efforts on creating the best tools we can and supporting them well, trusting that the market will reward the efforts. Again, I'm sorry if your experience didn't reflect that. Let us know what it'd take to right the ship in your eyes. If you still think there's a GSAP problem at play here, how about if you create a minimal demo that doesn't use Three.js and only focuses on the animation-related challenge instead? I'd be glad to look at that and provide advice.

You'd create a timeline instead of a single tween. Something like this should work. https://codepen.io/PointC/pen/zYpQVxj Happy tweening.