FLYPILOT

Hello guys. I've this code already working on my project, when I want to scroll the page only section by section. However this have a "bug on MacOS" that depending on how "strong" the scroll movement is done, both touch pad and magic mouse, more the one section is scrolled in total. I've attached a pen with my code and a video showing the jumping. Is this a known issue? is there any solution for MacOS? In windows the animation is fine. Screen Recording 2023-08-02 at 18.12.11.mov

Hey guys, thanks for the help. I've found the solution in my project and I wasn't able to apply to the pen. However here is the code for the solution: splitTextTimeline .from( mySplitText.lines, { delay: 0.5, backgroundColor: 'transparent', opacity: 0, stagger: 0.35, y: 10, autoAlpha: 0, } ) .from( mySplitText.words, { stagger: 0.15, duration: 0.4, y: 10, autoAlpha: 0, ease: "Power1.easeInOut", }, "<+=0.2" )

Thanks @GreenSock this is a half solution that I got here as well. However this don't have the same look as on the pen I've shared. With this we have empty spaces between the words. I think, a lines and words solutions could work for me. animate each line and them animate the words for that line, is that even possible?

Hey @Cassie thanks for reply to this. I want to change from transparent to blue, as the bg have the same time appearing than the text.

I've this split text animations, and I've a background color on a <p> and would like to animate this with the split text animation. Is that even possible?

@Rodrigo Thanks a lot, this worked perfectly. I've tried to update the code, but I think I was missing something, maybe was the calling for ScrollTrigger, but I'm not sure! Anyways, this helped me a lot. thanks!

I was looking into a way to "rotate texts" using splitText, and found this pen. However this uses an old version of gsap. Where can I find a new version of this or how can I update this code to the v3?

@GreenSock Thanks a lot, this really worked!

Hey @Rodrigo I've updated the example and added a autoplay, however, now I'm with a small bug when the autoplay is running and when I try to do a manual drag, the slider jumps https://codepen.io/jo-o-luiz-de-figueiredo-magalh-es/pen/NWObZwb

Hey @Rodrigo thanks again. So that's my issue, I don't have it working, but I have 2 functions that I started to create in lines 112 and 120 animateSlides() autoplay() in animateSlides, I was trying to run a gsap animation, but it didn't worked as well. I've updated the example with what I've so far.

Hey @Rodrigo thanks for replying to this. If take a look on the code, that is not functional for the autoplay part, you will see that I've been trying to use the DelayedCall and use the updateProgress. Unfortunately my issue right now is how to get the x position outside of Draggable, all my functions related to this position are relaying on the x inside the Draggable. Maybe I'm missing something here.However,

Hey @Cassie thanks for the reply, I've seen this function around, however I'm not sure If I want to change the entire logic here, since this is already in production. Mainly for the design of the slider, that have the "different size in the middle.

Hi guys, I've built this slider, including captions and bullet points, but I'm struggling to add an autoplay to this and keep all math I've build so far. Could you guys please help?

Hi guys, thanks for all the help, however I've found a simple solution using the first example: prevButton.addEventListener("click", function(e) { if(slideIndex >= 2) { slideIndex = 1 } baseTl.tweenFromTo(slideIndex, slideIndex += 0.25, {immediateRender: true, duration: 1, ease: "power1.inOut"}) }) nextButton.addEventListener("click", function(e) { if(slideIndex <= 0.75) { slideIndex = 1.75 } baseTl.tweenFromTo(slideIndex, slideIndex -= 0.25, {immediateRender: true, duration: 1, ease: "power1.inOut"}) }) this maybe not the optimized solution, but is currently working for 4 items, I think I do need to find a better solution though. But about the error, I've registered all plugins, and I just did a simple copy and paste code.

Hey thanks for the response, however I still no able to reproduce that, I just copy and pasted this example https://codepen.io/GreenSock/pen/PojYwPp and I'm getting a weird error: is that possible just to add an example. how to use the previous example I send to add the buttons functionality? without use loop?