Jump to content
Search Community

Ken Flores

Premium

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by Ken Flores

    GSAP and detecting item in a timeline, while looping Marquee.

    in GSAP

    Posted

    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! 

    See the Pen eYopjjY by kenneth-brian-flores (@kenneth-brian-flores) on CodePen

    ScrollTrigger Issue: Pinning columns inside rows always jump to the end, instead of pinning and sticking with the flow.

    in GSAP

    Posted

    @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! 

    See the Pen xxBYPEV by Ken-Flores (@Ken-Flores) on CodePen

    ScrollTrigger Issue: Pinning columns inside rows always jump to the end, instead of pinning and sticking with the flow.

    in GSAP

    Posted

    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, 
      
      });
             

    Screenshot 2024-01-29 at 1.59.35 PM (1).webp

    Screenshot 2024-01-29 at 1.59.58 PM (1).webp

    ScrollTrigger Section pinning not working. Pinning Items not working as expected

    in GSAP

    Posted

     

    On 1/23/2024 at 2:49 PM, Rodrigo said:

    Hi,

     

    I'm not 100% sure I follow exactly what you're trying to achieve here. I'd start for giving the text elements an absolute position in order to take them out of the document flow in order to prevent that jump in the Flip transition.

     

    Then I'm not sure why you have that ScrollTrigger instance for the first panel, since you're also creating another ScrollTrigger that is actually handling the animation. That could be a source of issues down the road. I'd keep just one and try to pin everything with that.

     

    Here is a fork of your codepen with my best guess of what you're trying to achieve:

     

     

     

    Also I recommend you to just remove ScrollTrigger and focus just on the animations. Once your animations are running the way you need you can plug ScrollTrigger back into your project and make sure that it works as expected.

     

    Hopefully this helps.

    Happy Tweening!

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

    • Like 1

    ScrollTrigger Section pinning not working. Pinning Items not working as expected

    in GSAP

    Posted

    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!

    See the Pen LYaLKja by Ken-Flores (@Ken-Flores) on CodePen

    Menu Opening and Closing Buggy

    in GSAP

    Posted

    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!

    See the Pen eYjmajg by kenneth-brian-flores (@kenneth-brian-flores) on CodePen

×
×
  • Create New...