gsapmonkey

That helps. Thank you so much!

Thank you so much. That link was useful for me to understand what a clip path is. I am able to fix the first one https://codepen.io/codingchefs/pen/XWQaERw For the second issue, is there a codepen/demo that you can point to that animates the border for a button on render using DrawSVG plugin?

Hi, I have a requirement to do 2 button effects 1 for "Explore newest city" and another for "Services" button. 1) The button should be fading in and then text can slide up word by word. The issue I am having is with button fading in. Is the below effect possible with button. The button background should be slowly revealing from bottom to top like in below example. https://codepen.io/eric-chuang/pen/wvWvNGd 2) The second button effect is the border animation with Services button. First, the border should animate and complete the button and the the text should slide in to the button. I have it semi working but the timing and styling is little off and the border around the button always shows? If I set it to hide, then border animation doesnt seem to work and also border has little gap. Really appreciate if you can help me with some ideas. Thank you so much!

Thank you so much! I will give it a try and see.

I am not particularly tied to locomotive scroll. Whatever can achieve the goal is fine. Do you know if this effect can be achievable in ScrollSmoother? Is there a close enough demo example of what I am looking for? Any ideas would be helpful. Thank you so much! The screen should be able to scroll smoothly in horizontal direction with any wheel event whether up/down or sideways just like in https://polygondesign.com.au/.

Hi, I am using locomotive scroll for the first time. I am facing some issue with moving horizontally when scrolling up or scrolling down. I am trying to have a effect like this website https://polygondesign.com.au/ It scrolls fine when I horizontally scroll on mousepad but not vertically up or down swipe on mac book. Highly appreciate any ideas or suggestions. thanks The attached codepen doesnt have the problem but attached to just give idea on what should be happening when scroll up and down. same behavior doesnt happen on my website. (I wonder if this is anything to do with any css issue) document.addEventListener('DOMContentLoaded', function() { var container = document.querySelector('#page'); // Initialize Locomotive Scroll var lscroll = new LocomotiveScroll({ el: container, smooth: true, // Enable smooth scrolling horizontal: true, // Enable horizontal scrolling multiplier: 2 }); // Add event listener for wheel event - DOESNT HORIZONTALLY MOVE WHEN VERTICALLY SCROLLED container.addEventListener("wheel", (evt) => { evt.preventDefault(); container.scrollLeft += evt.deltaY; }, { passive: false }); });

Sorry, I forgot to add the gsap and scrollTrigger into the pen. But you got the issue and solved my problem. I din't understand the concept of pin before. Thanks for clarifying it. I moved the section that needs to change on scroll into the container that has circles and made the circle container a pin. Now it's all working. Thank you so much for the help. I might have spent a good amount of my day figuring this out.

Hi, The requirement I have is to pin a circle element while scrolling. As I scroll, the sections inside the circle should change until all sections are exhausted. The sections need to be center-aligned. However, I'm facing an issue where the circle doesn't stop/pin in place and scrolls away. Each section has different text. An example section is attached. I have a total of 7 sections. The code pen I attached as working example doesnt work at all, but just attached as reference. But this is the codepen example I am trying to follow https://codepen.io/akapowl/pen/oNLXveK/0b5a30b2352ce90d92727a862259c476 The circles are absolutely positioned and the text sections too. Any ideas on how to approach this is greatly appreciated. I was trying many things but couldnt figure this out. Thanks in advance. (The section needs to be in the center of the white circle and the circle should be pinned in place while scrolling till all sections are exhausted)

Thank you so much. I will look into this post.

Hi, I am trying to get a circle-dotted border animated. As I scroll, the circle arc should fill in the distance between the solid dots with borders as shown in image. Is this possible with gsap. Any plugin like morphSVG? The closest I found though its not associated with scroll is below https://codepen.io/codingchefs/pen/JjVNwNL This is the codepen with my work in progress https://codepen.io/codingchefs/pen/wvZdYvo Any ideas how this can be accomplished?

The requirement is whenever I scroll, the text, image should keep on changing until all the text and images in my array are done. For the text, I am using textPlugin as suggested above. For image, I am just using regular code thought it would not work if there is a number in the path of the image tl .to(innerSectionSelector + ' .section-img img', { attr: { src: currentSection.imgSrc }, duration: 1, delay: i * solutionsSpacing }, 0); ex: imgSrc: '/wp-content/uploads/2024/03/1.svg', In the above case, it tries to find 1.234.svg as I scroll

Hi Cassie, haha...beginner's mistakes. but for my requirement, text plugin works good. For the image I am just making sure I dont have numbers in the image url or is there another plugin that can switch the image? thank you so much, that was very helpful.

Hi, I was trying to get text changing on scroll. But when I try this code, the numbers in the text are also incrementing and also there is some weird text replacement happening with rgba(200,200,200,0) Expected text: 2. Prepare for accelerated ramp-up, with transparent roadmap for staffing, knowledge transfer, team integration and performance KPIs. Actual Text that is showing up: 1.7853 Prepare for accelerated ramp-up, with rgba(200,200,200,0) roadmap for staffing, knowledge transfer, team integration and performance KPIs. Can someone please help how to fix this issue? Codepen attached. Thanks

Thank you so much for the response. Dint know I can do that way. I may have to change my approach a little bit here as I need to connect this to a vertical scrollbar. Really appreciate the help.

Hi, I am just starting on gsap from last few weeks. I have a simple animation, I am trying to figure out from last few days. I have a circle and dots on the circle radius. Requirement is to scale the dots when the screen enters the section and when the user scrolls each dot should get a border indicating different content (which means a text change and image change). The issue I am facing is the borders around circle are able to appear correctly when scrolling down. But when scrolling up, the borders around the dots are not disappearing correctly. Only 3 dots out of 5 disappear when it reaches the first content, where 4 should disappear. I am not sure if I am having the right approach. Any help in the right directly is greatly appreciated. thanks in advance! Codepen attached.