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

Carl last won the day on December 24 2023

Carl had the most liked content!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I was working on a basic example, but the article from @PointC that @mvaneijgen mentioned will explain everything you need to know and more! https://codepen.io/snorkltv/pen/mdooqQX?editors=1010
  2. 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 https://codepen.io/snorkltv/pen/WNmzezX?editors=0011
  3. Sorry, I'm not sure I can edit it so that you easily understand it. That's why I spend hours creating video lessons that explain everything in detail. However, this is what the edited code would look like: https://codepen.io/snorkltv/pen/wvOyeYO?editors=0010 Good luck with the rest of your project
  4. it's very hard to tell without a minimal demo. it sounds like you might just be animating it to 100 multiple times which won't show any change if the y is already at 100. make sure you are increasing the y value by 100 each time. This can be done using the relative string syntax y:"+=100" gsap.to(something, {y:"+=100"})
  5. This seems just like a recent lesson from my SVG Animation with GSAP course. The general idea is that each item has it's own repeating animation created in a loop https://codepen.io/snorkltv/pen/zYyBKmG
  6. Thanks for the demo. Try setting body { overflow-x: hidden; } Or you can put your <p> element in a wrapper div that has the same css. https://codepen.io/snorkltv/pen/qBvNdWd
  7. if you want the whole wave play through and then just repeat maybe just have a timeline that repeats like so. https://codepen.io/snorkltv/pen/JjzGgVY?editors=1010 the first time I read the question I thought each line needed their own repeatDelay.
  8. 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: https://codepen.io/snorkltv/pen/oNVbKPb?editors=0010 I slowed down the stagger each amount so that you could see how the repeating works.
  9. 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 https://codepen.io/snorkltv/pen/PoLZZaE?editors=0010 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 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
  10. 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 https://codepen.io/snorkltv/pen/bGZEVaw?editors=0110
  11. perhaps running your value through this regular expression will help: https://codepen.io/snorkltv/pen/KKEKPWX That demo is a simplified version of the following demo from my lesson on creating reusable GSAP effects https://codepen.io/snorkltv/pen/NWRqmOv?editors=0010 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 😃
  12. 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 https://codepen.io/snorkltv/pen/gOZaoPK
  13. Hello. It is recommended that fixed elements go outside your wrapper Please see the ScrollSmoother caveats in the docs: https://gsap.com/docs/v3/Plugins/ScrollSmoother/#caveats
  14. 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: https://codepen.io/snorkltv/pen/QWzXQWE?editors=0010 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".
  15. Each button has a data-target attribute which is the id of the element it should animate https://codepen.io/snorkltv/pen/LYMopVZ?editors=1010 <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
×
×
  • Create New...