utopian

You can go ahead and ignore this. I realized all I had to do was export my ScrollSmoother and import it into my react component. It's fixed now.

Hi there, I don't have a codepen for this since it's more of just a question for an issue I'm debugging. We have built a website and the website uses ScrollSmoother, however we decided to build a specific part of one of the pages on the website using React. When I use ScrollTrigger on the react component it doesn't hook into ScrollSmoother which is used on the page and when I try to use ScrollSmoother.get(), it returns undefined. I was wondering how I might be able to get ScrollSmoother.get() to return the correct value when it's in the surrounding (parent) elements outside of the react components.

Hi there, I was wondering if it's possible to have the ScrollSmoother effect "data-speed" have an element parallax the opposite direction. At the moment everything seems to always move from down to up when using "auto", it would be nice to be able to add a parameter to flip the direction of the animation. For example, on a project I'm working on. There are two images next to each other and my client wants to have each image parallax in opposite directions. Using "auto" they both go the same direction so it doesn't really do the trick. Obviously I could do it using GSAP, but it seems like it would be a nice trick to be able to just utilize the ScrollSmoother effects and add extra param to set the direction. If this isn't currently available, maybe you could let me know if there's a place I can request the feature? Thanks!

Hi Cassie, thank you so much! This looks pretty perfect, I will try adjusting my code based on yours tomorrow. Thanks so much for the help!!

Hi there! Thanks for the advice on making a more minimal demo, here it is: https://codepen.io/julienkos/pen/poLErNz. Thanks Jack for the message, I will review that and test it out tomorrow morning. Europe time here. Have a great day guys and thanks for the amazing support!

Hi there! My issue is that I'm trying to rebuild my motionpath for my timelines when resizing the browser. I've read already that the motionpath plugin isn't responsive and from other forum posts, I read that we are supposed to kill our timeline and then rebuild it in order to resize it, but it isn't working for me. I was hoping I could have some help on this since I've spent almost all day trying to make this work and it doesn't seem to. You can see the screenshot below after resizing the browser. It's as if the dom doesn't update the size of the svg path on resize. I know there's quite a bit of code in the codepen I shared. However the functions to look at are: "textScroller()" - which has two functions in it which handle the motionpath text scrolling/sliding - "setupSlide()" for each clickable layers and resizeCheck() which when changing the browser size rebuilds the timelines after killing them. Line 53 - I convert the polyline to path. Lines 55 to 91 - I setup the variables based on screen size for delays on each timeline.to functions. Lines 96 to 105 - I run through all my slides/layers and run the setupSlide() to setup the timelines The timeline call is at line 118. Hopefully this is helpful and not too much of a mess! Thanks for your help!!

I don't know if you noticed but if you scroll before the first animation is finished, it takes the current CSS styles and applies them as to original styles to use with the scrolltrigger, so if you scroll before it's opacity: 1, then that is the value which is used when you scroll all the way back up. Do you recommend stopping users from scrolling until the first animation is finished and then letting people scroll afterwards in order to have the values all set? I was testing using fromTo on the scrolltrigger but that wasn't working. Let me know your recommendations please. Thanks!

Thank you Caissie! I will see if adding lazy: false fixes it for me. So glad to have access to such amazing support with you guys. Have a great weekend!

I did notice that if I add immediateRender:false it fixes it. I am not sure why though. If someone could explain and also confirm that that's the correct way to proceed with this. Thanks!

Hi there, I've got a weird issue that is probably because I'm doing something wrong and was hoping someone could help point me in the right direction. I've used an array to create a gsap.from() with scrolltrigger on the element of the array so that when you reach the section it will fade it in using the gsap.from(). However this only works if I load the codepen directly in the screen by clicking "run" otherwise if I just reload the page it doesn't do anything. I noticed this behaviour while working on a client project where if I opened the page in a new tab it wouldn't load the animations on scroll. I added an onComplete to see if it's working on it does log the section as it's being scrolled through however the animation itself just doesn't function. If I put a gsap.to in the onComplete it works, but that seems wrong. I've made a small video to help you see what I'm showing in the codepen: https://www.loom.com/share/be4e15ce7d454e54b9291df1b4e6dc20. Please let me know if you have questions and if you can help. Thank you!!

Thank you for the excellent support! I see the mistake. I did not realize that with the timeline, I could have the effects happen back to back and have one ScrollTrigger to control them both (because the animations are back to back). I've figured it out and it looks great. Thanks again!

First off, if you are working on WordPress and editing themes. You should always create a child theme to make customizations on. It's bad practice to customize your parent theme (or just theme) because if the author of the theme updates their theme and you update it, you will lose all your customizations. If you make customizations on a child theme, you will then be able to safely update the parent theme without losing all your work. Now to help you enqueue. Your code should look like this: function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js', array(), '1.0', true ); wp_register_script( 'gsap-settings', get_stylesheet_directory_uri() .'/gsap-options.js', array('gsap'), '1.0', true ); wp_enqueue_script('gsap'); // This is probably not needed since below we are enqueueing the gsap-settings file with has a dependency on the gsap script, so it should enqueue both wp_enqueue_script('gsap-settings'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); This would then enqueue the script properly I believe (haven't tested it but pretty sure it should stop the error). I also added a gsap-settings script, which you can create that js file in your theme at the correct location and write all your animation in there and call gsap. Hopefully this helps!

Hi there! I have prepared a codepen that will hopefully help find the solution to my problem. I am using both ScrollTrigger and SplitText to try to animate some text. My goal is to do the following: 1. Have the first h1 animate into the page when the page loads. 2. Once the user scrolls down a bit, the h1 will animate out and the h2 will then animate into the page. This "works". The issue is once you scroll back up. When you scroll back up the h2 will animate out and the h1 will animate back in, however the h1's first character will not be visible. I noticed that if I comment out the first part of my timeline (the from()), it then works perfectly, however I can't seem to get it to work if I animate the h1 when the page loads. Here's another codepen showing what I just mentioned above (commenting from()): https://codepen.io/julienkos/pen/MWEVvQE. Please let me know if you can help! I appreciate it.