Jump to content
Search Community

TerraHQ

Premium

  • Posts

    58

  • Joined

  • Last visited

 Content Type 

Posts posted by TerraHQ

    Collapse Expand Issue

    in GSAP

    Posted

    Hi there!

    I want to implement an animation where, upon scrolling down, the current card collapses, and the next (index + 1) card expands. Correspondingly, when scrolling up, I aim for the current card to collapse, and the previous (index - 1) card to expand.
    Up to this point, I have applied an approach that achieves this behavior when scrolling down, collapsing the current card and expanding the next one, and vice versa when scrolling up. This dynamic works correctly upon entering and exiting the global scroll trigger.
    The issue arises when, within the global trigger, I interact with the scroll. For example:

    Example 1:
    Scrolling down, I expand card[1]. At this point, I want to open card[0] when scrolling up.

    Example 2:
    I scroll down, expanding card[1]. Then, I continue scrolling, open card[2], and close card[1]. Now, when scrolling up, I close card[2] and open card[1], repeating the process. I continue scrolling up, and now card[1] closes, and card[0] opens. At this point, when scrolling down, card[0] should close, and card[1] should open. Instead, what happens is that card[0] remains open, and card[2] also opens, while card[1] remains closed.

    My goal is for, regardless of the position, the next (index + 1) card to open when scrolling down and the previous (index - 1) card to open when scrolling up.

    Thanks in advance!

    See the Pen oNmaqPe by Julieta-Fredes (@Julieta-Fredes) on CodePen

    Looking for a freelancer to assist on a project

    in GSAP

    Posted

    Hello everyone!
    Rebrand and the new website design  looks fantastic.
     

    I've been searching for a freelancer to help me fix a bug on one of my websites, but I'm having trouble locating where I can post the job request. Unfortunately, I couldn't find the "looking for talent" section on your website.

    Thanks in advance!

     

    • Like 1

    Horizontal Scroll + swipe on mobile

    in GSAP

    Posted

    Hey! - Many people have dedicated significant efforts to solving this problem, but unfortunately, I haven't been able to fix it. If anyone could provide a complete example on CodePen, I would greatly appreciate it.

     

    If not, I will attempt to address it myself.

    Thanks #community.

    Horizontal Scroll + swipe on mobile

    in GSAP

    Posted

    hey @mvaneijgen

    I've made the changes that you requested but this feels off.
    onDrag: (self) => {
        console.log(self.deltaX);
        console.log(self.deltaY);
        let horPos = Math.sqrt(self.deltaX * self.deltaX)
        let verPos = Math.sqrt(self.deltaY * self.deltaY)
        if(horPos > verPos) {
          gsap.to(window, {
            scrollTo: {
              y: `-=${self.deltaX * 10 }`,
            }
          });
        } else {
          gsap.to(window, {
            scrollTo: {
              y: `-=${self.deltaY * 2 }`,
            }
          });
        }
      }
    So, on my phone's acting all funky – the touch isn't quite doing its job smoothly. I think I might be making things way more complicated than they need to be. check

    See the Pen WNLgLxY by amaiaTF (@amaiaTF) on CodePen

    link from your phone.

    Try swipping both directions.

    Horizontal Scroll + swipe on mobile

    in GSAP

    Posted

    Hello there!
     

    A few weeks back, I initiated a discussion regarding responsive horizontal scrolling, which you can find here (TSM Carl for your help).



    I'm providing original pin from Carl.

    However our client has expressed an interest in exploring the possibility of enabling users also to to swipe from right to left once the content is pinned, creating a more conventional scrolling experience for mobile/touch devices.
     

    Is this a feasible  to implement? in case of not, why? 
    I've scoured the documentation but haven't come across any relevant information on this specific matter.


    Thanks in advance

    See the Pen PoxojaO?editors=0110 by snorkltv (@snorkltv) on CodePen

    ScrollTrigger Pin + other triggers after

    in GSAP

    Posted

    Hi All,

    I'm working with two ScrollTriggers: one that pins and enables horizontal scrolling (referenced as ".horizontal-scroll"), and the other that triggers an animation in the "counter-section." When I remove the ".horizontal-scroll" script, the trigger position for the "counter-section" works perfectly. If I dont remove the script the counter section fires at wrong position.

    Thanks in advance!

    See the Pen VwqWWae by amaiaTF (@amaiaTF) on CodePen

    Responsive Horizontal Scroll

    in GSAP

    Posted

    Hey @Carl, thanks for your help on this

    I took your example and only modified
    <h2>Austria</h2>
    to 
    <h2>I never been to Austria</h2>
    and added a 1 red pixel in the races div, and the same thing happens with the wrapper. We've added a pink border so you could see it, here's the link: 

    See the Pen ExGZGYb by andresclua (@andresclua) on CodePen



    However, even if the elements appear to be "outside" of the wrapper, your codepen does work on resize and it behaves perfectly, and mine doesn't.

    Do you have any insights on why this may be happening?
    Thanks again! Appreciate the help here

     

    Responsive Horizontal Scroll

    in GSAP

    Posted

    Hey There, 

    Would this be a good base to work on for an horizontal scroll pinned gallery? It is happening to my team that with simple elements, it works ok, but as soon as we add cards, texts, etc. it doesn't respond as it should. 

     

    Therefore, before keep trying stuff, I want to make sure that the base is ok and that I'm not making any mistakes here that I'm then dragging along.

     

    Also, if I wanted to include a debounce/throttle in the getScrollAmount function, would that be possible? Is that needed? The reason I ask is because that's an idea we had in order to give it some time to respond when CSS is changed. 

    Thanks in advance!! ❤️ 

    See the Pen YzdNEjj?editors=0110 by andresclua (@andresclua) on CodePen

    OnLoad Animate only visible elements

    in GSAP

    Posted

    ok, so I made another example and tweak a little bit.

    See the Pen ZEqxGWY by andresclua (@andresclua) on CodePen




    I want my animation on load to run as a sequence

    1. Animate hero
    2. Animate title
    3. Animate subtitle
    4. then show the CTA
    5. then animate cards with stagger.

    When I'm on a screen that everything fits I will do the whole thing ( no scrolltrigger needed).
    Case A
    imagine that I'm on a tablet or phone and on load User only can see only the hero, but cta & cards are not visible, how could I trigger same animation? 
    Case B
    imagine that I can see hero and CTA, but no cards visible, I still want on load animate 1 to 4, and on scroll fire animation with scrolltrigger

    Maybe is using matchmedia or ScrollTrigger.isInViewport() or isInViewport function that I wrote above ^ 

    Hope this is more clear, and TSM for all your help.

    OnLoad Animate only visible elements

    in GSAP

    Posted

    hey guys, first of all thanks for your fast reply!
    I'm not saying you are not right at all, It is quite strange that when I add Scrolltrigger is not playing on load it only plays if I remove scrolltrigger.
    I know that with a video you can't do too much - link   so just if you have as reference.

    @Cassie How do you to for fire an animation if user do not scroll? 😅

     

    OnLoad Animate only visible elements

    in GSAP

    Posted

    I'm pretty sure I didn't explain myself correctly, I have updated the pen with a possible solution, BUT idk if is the "right way".
    I want to animate on load if visible, and if is not visible apply a scrolltrigger.

    I change the animation so is more clear.

    At first I tried with 
     

    isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
    }

    but then I saw this


     

    OnLoad Animate only visible elements

    in GSAP

    Posted

    I have a similar question to this. 
    On load, I Fire the main tween, that contains two sub animations.
     - heroAnimation
     - cardAnimations

    I would like to animate everything that is only visible, probably the hero +  the first 1 /2/3 cards (depending on viewport size).
    How could I add scrolltrigger to the rest of the cards so they don't animate on load but on scroll.

    Could this also be "tweaked" when resize?

    Thanks!
     

    See the Pen yLRvYPv by andresclua (@andresclua) on CodePen

    Infnite Marquee

    in GSAP

    Posted

    Hey!
    I'm trying to get an infinite marquee.

    It doesn't work as expected, at some point there is a small shift. Any idea how could I solve this?
    I've seen this example, 

    See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

     but I dont want to have harcoded values, my elements could have different lengths,etc.

    Any inmidiate feedback/suggestion is welcome

    Thanks in advance

    See the Pen jOpJJgv by andresclua (@andresclua) on CodePen

    Infinite Slider (request animation frame) + Listen Events

    in GSAP

    Posted

    hi there!
    I'm having an issue with a custom cursor + event listeners. If you hover over the cards on the codepen you will see that each one has its own color. However, if you hover over one and scroll without moving your mouse, the cards will move but the cursor won't change its color until you move your mouse again. 

    Is there any way to make the cursor change color, perceiving the card that has below, without the need of moving my mouse and just through the scroll? I'm sure I cannot be the first person experiencing this 😅

    Thank you!

    See the Pen gOjwbQV by andresclua (@andresclua) on CodePen

1
2
3
Page 1 of 3  
×
×
  • Create New...