Ken Flores

@GreenSock THIS IS PERFECT THANK YOU!!!! 😭🥰

Hey Gurus and amazing people of the GSAP community! Im trying to have a continues flow of having the middle word being red, anyone knows if there is a better gsap way? a way to detect the item that is in the middle to be able to turn it red? Perhaps with scrolltrigger? because i am not in the scrolling that may not be the way.. Also, when I clone the track and then I scan items again, it just keeps going up in blanks instead of looping.. thanks for your help in advance!

@GSAP Helper @Rodrigo Since its divi builder I am unable to fork it! BUT I have made a link live for us to be able to explore what the problem is! I have debugged a lot of it to my code, I had a timeline playing wrongly, but Im still getting jumpy Animations when pinning. Fork below of a brief example! IN smaller vh it works somewhat right, but everything should end as center, but when vh is larger screens, it jumps! https://codepen.io/Ken-Flores/pen/xxBYPEV

Hey all! I work with the theme DIVI for Wordpress and have so many issues using GSAP ScrollTrigger Pin, i think its me because it happens to me all the time even in Scratch HTML projects, But pinning is always buggy to me and I must be missing something. Here Im trying to have my left column be pinned so I can have the right column scroll through other stuff I want to show. But it is jump pinning, so I have to figure that out first! Here is the ScrollTrigger Code I used, Obviously cant use CodePen because its in Wordpress! ScrollTrigger.create({ trigger: '.csb', start: 'top center', end: '+=500', scrub: true, pin: true, markers: true, }); Screen Recording 2024-01-29 at 2.02.44 PM.mp4

Thank you! This suggestion actually helped me achieve what I needed to achieve.

Thank you guys! Super clarifying!

Hello GSAP Community, I've been working on a project that involves using GSAP's ScrollTrigger, Flip, and MorphSVG plugins to create a dynamic web animation. Despite my efforts, I've run into several issues that I can't seem to resolve. Any help or advice would be greatly appreciated. 1. SVG and Text Interaction with ScrollTrigger: My primary challenge is managing the interaction between an SVG element and its accompanying text. I'm trying to achieve the following behavior: Initially, for the text that appears under the SVG. Using ScrollTrigger, the SVG should be pinned and then, at a specific scroll point, move to the opposite side of the screen. Upon moving, it should be re-pinned, allowing the scroll to continue with the text appearing from the original SVG position. 2. Layout Challenges with Flip and Text Positioning: I'm also trying to use Flip to manage the layout, particularly for pinning text on the left side. However, if I don’t hide the text (display: none), it wrongly pushes the SVG to the bottom, disrupting the intended layout. The hidden text seems to affect the layout as if it were still visible. 3. Section Length Flexibility with MorphSVG: Finally, I need the animation section to dynamically adjust its length, ideally to accommodate the end of the animations, but I'm not sure how to integrate this flexibility with the timelines and the ScrollTrigger Sections. Attempts and Roadblocks: I have experimented with various CSS and JavaScript approaches to manipulate these GSAP plugins, but haven't found the right combination or configuration. It seems like there's a gap in available tutorials or examples for these specific use cases. Seeking Insights and Best Practices: Does anyone have experience with combining ScrollTrigger, Flip, and MorphSVG in this way? How can I effectively pin elements, control layout shifts, and ensure smooth animation transitions? Examples, code snippets, or any guidance on best practices would be incredibly helpful. Thank you for your time and support!

I am trying to recreate the effects on this page with no luck. Anyone got good starting points or know of a demo? Ive tried with all the plugins with no luck. Maybe GSAP is not for this? https://zhenyary.com/404

@mvaneijgen Wow thanks! This is exactly what I needed! So much knowledge! I've learned a lot from your explanation! So excited to have an awesome community like you guys!

Hello friends! I have been trying to make this code work, but I am unable to do it without a bug that makes the menu button have to click twice, and when it does work on reverse, I expected the animation to have the same run-through of the text disappearing first.. Could you guys point out what i'm doing wrong here? Thank you so much in advance!