Jump to content
Search Community

Carl last won the day on December 24 2023

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,821
  • Joined

  • Last visited

  • Days Won

    546

Posts posted by Carl

  1. Thanks for the demo. 

    In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation.

     

    I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback.

     

    However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div)

     

    Hopefully you can find a way to apply something similar to your project

     

    See the Pen WNmzezX?editors=0011 by snorkltv (@snorkltv) on CodePen

    • Like 2
  2. thanks for the demo. I think a loop would provide the best solution / most flexibility and you could have all your tweens in a timeline that could be paused/played as normal.

     

    Here's a not-so-conventional approach using a slow() ease that is configured to end where it begins thus getting rid of the need for a yoyo.

    If you don't like the ease of the up-down animation you could also create a customEase with finer control over the rate of change.

     

    Here is a quick demo of the slow() ease:

    See the Pen oNVbKPb?editors=0010 by snorkltv (@snorkltv) on CodePen

     

    I slowed down the stagger each amount so that you could see how the repeating works.

    • Like 2
  3. thanks for the additional info.

    I believe this has to do with overwriting.

    You are creating conflicting tweens and my guess is that when played in reverse the animation that animates from x:0, y:0 to x:0, y:0 is winning the battle and thus you see the box jump back to the initial start state.

     

    If you set overwrite:"auto" on tweens 2 and 3 then:

     

    tween 2 will kill the y portion of tween 1

    tween 3 will kill the x portion of tween 1

     

    I think this works for this exact scenario you have

     

    See the Pen PoLZZaE?editors=0010 by snorkltv (@snorkltv) on CodePen

     

    If you set overwrite:true then tween 3 will kill BOTH tween 1 and tween 2.

    You can give it a try to see how that looks (bad)

     

    from the docs

    Quote

    overwrite:true all tweens of the same targets will be killed immediately regardless of what properties they affect

     

    https://gsap.com/docs/v3/GSAP/Tween

     

    I also think this video will help with overwrite modes

     

     

    I know you are saying that the tweens are automatically generated, but my advice would be to add whatever logic necessary to avoid creating conflicting tweens in the first place.

     

    Hopefully overwrite:auto solves the problem

     

    Carl

     

     

     

     

     

     

     

    • Like 4
  4. Thanks for posting the nice demo.

     

    For case 1 the perceived delay is just because the first tween where you animate from x:0, y:0 does nothing for 0.5 seconds.

     

    For case 2 you don't need that first tween at all. When I removed it looked like things were working fine.

    Although I don't think it's 100% necessary here it is recommended that you don't animate the element that you use for the trigger.

    I added a wrapper div to act as the trigger.

     

    Please see if this gives the desired result

     

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

    • Like 2
  5. perhaps running your value through this regular expression will help:

     

    See the Pen KKEKPWX by snorkltv (@snorkltv) on CodePen

     

    That demo is a simplified version of the following demo from my lesson on creating reusable GSAP effects

     

    See the Pen NWRqmOv?editors=0010 by snorkltv (@snorkltv) on CodePen

     

    If you need more help understanding what's going on check out my complete GSAP training.

     

    You'll learn a ton of helpful tricks like this.

     

    EDIT: if you need help with regular expressions, I recommend chatGPT 😃

    • Like 3
  6. Perhaps this simplified demo of mine can help.

    The basic idea is that your background needs to be larger than the element it is applied to.

    I'm using a portrait image inside a square container which guarantees there will always be extra image to reveal

     

    See the Pen gOZaoPK by snorkltv (@snorkltv) on CodePen

    • Like 3
  7. thanks for the demo.

     

    The big problem is that you are putting a ScrollTrigger on a tween in a timeline. This creates a conflict where both the timeline and ScrollTrigger are fighting for control of the tween. 

     

    Please read: https://gsap.com/resources/st-mistakes/

     

    Another issue is that your ScrollTrigger's star postion is "top top" which means it is active the instant the page loads.

    I set it to use start:"top -1" which forces the user to scroll.

     

    The demo below should basically work if the user does NOT scroll while the first animation is playing:

     

    See the Pen QWzXQWE?editors=0010 by snorkltv (@snorkltv) on CodePen

     

    There's unfortunately a few logic problems to work out if you want to animate an item with a timeline and also allow the user to control a tween using relative values on that item via a ScrollTrigger.  The big issue is that if the box has a margin-top of 50 while animating at first and then the user starts scrolling, then the ScrollTrigger animation will have a starting value of 50 and end value of 150.

     

    You could try to prevent scrolling by setting overflow:hidden on the body during the first animation but then the page will most likely shift when the scrollbar gets added. I'd normally recommend against preventing scrolling. 

     

    Also, I would stick to animating transform values like "x" instead of "marginTop". 

     

     

    • Like 1
  8. Each button has a data-target attribute which is the id of the element it should animate

     

    See the Pen LYMopVZ?editors=1010 by snorkltv (@snorkltv) on CodePen

     

    <div class="targets">
        <div class="box blue" id="box3">3</div>
        <div class="box red" id="box1">1</div>
        <div class="box orange" id="box4">4</div>
        <div class="box purple" id="box5">5</div>
        <div class="box green" id="box2">2</div>
      </div>
      <div class="buttons">
        <button data-target="#box5">5</button>
        <button data-target="#box1">1</button>
        <button data-target="#box2">2</button>
        <button data-target="#box4">4</button>
        <button data-target="#box3">3</button>
      </div>

    The index or order of elements no longer has any importance.

     

    hope this helps

    • Like 2
  9. I’m not at my computer and it’s unlikely I’ll have the time necessary over the weekend to be of much help. However, this is a fairly intriguing scenario. 
     

    it’s clear you’ve put some effort into this and you know a fair bit about gsap and ScrollTrigger. 
     

    i have quite a bit of experience and after thinking of this for awhile I’m still not exactly sure how I would approach it. However, I do think you could do it by putting the majority of animation in one timeline that you scrub through with a single ScrollTrigger. 
     

    in fact I would strongly suggest that you take some time to approach this fresh and just make all the animation work without ScrollTrigger. 
     

    this serves 2 purposes:

     

    1 it forces you to make sure you understand exactly what needs to happen on the animation side. 
     

    2 it gives us a much better idea of what the final product should look like and better see where things like loops, callbacks, and additional scrolltriggers can be used to streamline the process. 
     

    I’m guessing this will also need to be responsive which is hard to account for later in the process. So that’s another thing to have planned out prior to adding ScrollTrigger too. 
     

    there is no standard way of approaching these types of animations and it takes a lot of experimenting to find a solution that works best. 
     

    from the demo and images you provided there are still quite a few unknowns. If you can provide a more complete animation mock-up without ScrollTrigger then myself and others will be better suited to offer some actionable guidance. 
     

    again I think a lot of this can be done by scrubbing a single timeline. 

  10. Thanks for the demo. You did a good job.

    The main issue is that you aren't setting up your cycle timeline until after the headings slide in.

    This caused you to see all the words on top of each other in their "pre-animated" state.

     

    I did a few things 

    • I set the cycleWords function to return the timeline
    • I called the cycleWords function before the main timeline was built
    • I paused the cycleWords timeline at a time of 1 (this makes only the first word show)
    • I changed your onComplete callback on the main timeline to tell the cycle timeline to play

    See the Pen BavGPpo?editors=0010 by snorkltv (@snorkltv) on CodePen

     

     

    • Like 3
  11. Hi @PapaDeBeau

     

    I think the main problem was just the syntax / formatting in the eventlisteners. When using multiple lines in an arrow function you need the {}

     

    See the Pen eYbVPPm?editors=1010 by snorkltv (@snorkltv) on CodePen

     

    item.addEventListener("mouseleave", () => {
         console.log("Still works")
         one.reverse()
       });

    Also in your loop item is the button with a class of ".Amazing" so I don't think you need to do

    item.querySelector(".Amazing"), you just need to animate each item.

     

    also, be careful with from tweens on buttons. you don't want them moving away from the mouse when you enter them because then they could trigger the mouseleave immediately. 

     

    Glad to hear you enrolled in the classes!

     

    I'm sure if you put in the time and practice you find a wealth of information in there.

     

    Carl

    • Like 1
  12. I can't really dig into all your code, nor do I really understand the latest question. However, if you feel that markers are thrown off somehow this is usually a side-effect of animating the trigger. In other words, don't make the trigger (section) the same thing as the target of your tweens.

     

    ScrollTrigger needs to measure the y distance of the trigger in order to position the markers, start, and end values. Animating it causes trouble.

     

    use a structure like

    <section class=trigger">
    
      <div class="thingToAnimate"></div>
    
    </section>
    
    
    
    ScrollTrigger.create({
    
      trigger:".trigger",
    
      animation:gsap.to(".thingToAnimate", {y:200});
    
    })

    one way to test if this is the issue is to just make your animation change the opacity of the section. If things work well this way that means that animating the y of trigger is the issue.

    • Like 1
×
×
  • Create New...