Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ZachSaucier last won the day on January 19

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  1. Hey Zahir. This is a great use case for modifiers: https://codepen.io/GreenSock/pen/ExaOpRM?editors=0010 We also recommend that you use GSAP 3's formatting. You're already loading it in the demo, you can just start using the new features like switching out TweenMax for gsap
  2. I think you're paranoid To prove you're not, maybe a screen share would be good? You can tell that there is not any offset by looking at where the two circles touch - they never stop touching.
  3. Yes, I'm certain. You can tell from the text in your pen. Here's a minimal demo that shows it very clearly: https://codepen.io/GreenSock/pen/povQKxR?editors=0100
  4. Hey @jonForum. Good catch and thanks for the gif to reproduce it. It should be fixed now (it was just with the v2 visualizer).
  5. Hey MustketeerHo. This is caused by the image not being perfectly symmetrical, not anything related to GSAP. There's no way to get rid of it other than to get a different (symmetrical) image.
  6. @Adamk247 I just happened to come across this pen. Maybe it was made by the creators of that page? It's similar https://codepen.io/soju22/pen/OJPBmKR
  7. Hey @Adamk247 and welcome to the GreenSock forums. This thread should provide you insight on how to animate waves. Another similar thread that may help is Other than that, please let us know if you have specific questions. We don't have the capacity to build out every effect that users ask for
  8. Hey ninmorfeo, This is exactly what .getProperty() is for. We don't recommend mixing jQuery's .css() with GSAP as it's really not ever necessary to do.
  9. Hey Ben and welcome to the GreenSock forums! Using timeScale to make a timeline responsive is an... interesting approach we generally recommend killing off the previous tweens/timelines and creating new ones on resize if the need be. Alternatively using responsive units or something like intersection observers make it so you don't have to do that a lot of the time. It seems like this.scrollTimeline.time(window.pageYOffset); would be passing in numbers that are much larger than the duration of the timeline if the page is very tall. I might check to make sure that value is within the time of the scrollTimeline. Besides that, it's really hard to say what's going wrong. Sorry, but it'd be very helpful for us to see a minimal demo. P.S. Why not use GSAP 3? It's smaller, has a lot of new features, and has an improved API. If you do switch over to GSAP 3, use the beta file for now because version 3.0.5 has a regression related to timeScale.
  10. Hey Nada and welcome to the GreenSock forums. From what I can tell, this is the expected behavior (i.e. what should happen). Think of timelines as a list of smaller animations. When you call menu_tween_1.to (creating a new tween/animation and adding it to the menu_tween_1 timeline) then later when you reverse the entire timeline those tweens/animations that you add to it should be reversed as well. What are you expecting to happen? Can you please create a minimal demo recreating the issue(s) that you're facing? It would greatly help us in helping you. P.S. We highly recommend GSAP 3. It's smaller, has a bunch of new features, and has a smoother API
  11. Hey r26 and welcome. That demo is actually open source on CodePen! Here's Darin's version which it's based off of: https://codepen.io/dsenneff/full/6b2bb89edaac4b4ce3b8ecb8fd0ecb73 The core of that specific effect is GSAP's SplitText plugin. Let us know if you need help with anything specific!
  12. Hey AslanGoi, In terms of how to count developers for the different levels of the Business Green membership, it’s based on the number of people who would actually use GreenSock tools. So if 7 of the employees at the company would never touch GSAP code or anything that's directly related, they don't have to be included in the count. However it’s not intended to be a license that gets passed around from person-to-person, like “Hey Sally, can you stop using GreenSock for 5 minutes so I can update something?” If a company has 3 developers who use GreenSock from time to time, they should get the “Up to 5 developers” license. You can always upgrade later too. Also note that the commercial license that comes with Business Green must be kept active for the duration of the time which you are selling the product that is using GreenSock technology. So if you stop developing with GSAP this year but still sell the product in future years, you'd need to keep that license active (renew it yearly or just get the permanent license). Let us know if you have any questions!
  13. Hey AslanGoi, This really does not look like a GSAP specific question, but more of the logic in which your custom slider pagination works. The error about the target being null means that slides[nextSlide] (the line that the error points to) is null. That means that your logic is wrong related to the next slide. Fix that and the problem will go away It looks like you (or whoever made that video) got most of the core code from this post:
  14. Hey MusketeerHo and welcome. The main issue is that you didn't load InertiaPlugin (previously known as ThrowPropsPlugin). Adding that and changes endValue to the correct value in your callback fixes your issues https://codepen.io/GreenSock/pen/rNaqoeN?editors=0010 Keep in mind that using InertiaPlugin on your site requires at least a Shockingly Green Club GreenSock membership. We'd love to have you join the club!
  15. Hey ninmorfeo, Good question. The end property is perfect for this sort of thing: https://codepen.io/GreenSock/pen/povxZrK?editors=0010 Check out the MotionPathPlugin docs for more details and other properties. They're not too thorough at this point but we're working on improving them. Another resource that may help you understand how to work with motion paths is this helper function that animates the drawing of a line to specific anchor points.
  16. Hey SamW and welcome to the GreenSock forums! I believe that this is related to the default value of overwrite being changed to false from "auto" as it was in GSAP 2. Specifically an overwrite of "auto" or true is required for your ev.currentTarget opacity tween because it's in conflict with the other tween that changes the opacity to 0. https://codepen.io/GreenSock/pen/mdyzKNJ?editors=0010 I went ahead and also updated the formatting to use GSAP 3's format, including putting the duration in the vars parameter, using the string form of eases, and using gsap instead of TweenLite/TweenMax. Those are all optional of course, but are recommended and I think improvements Happy tweening!
  17. Hey nullhook and welcome to the GreenSock forums! Please create a minimal demo of this error so that we can make sure to find any bugs that may exist. I am unable to recreate it given the code that you provided: https://codepen.io/GreenSock/pen/qBEJKGv?editors=0010
  18. Cool animation! I like it. Very good question. repeatRefresh currently only works when the tween itself is what has the repeat property on it. Since you're repeating an entire timeline, the individual repeatRefresh isn't applied. To work around that, you could create a new set of tweens for those that you want to repeat with different values after the timeline has completed. I also set the progress to 0 of your CodePen timeline and invalidated it because it ends up in a different place (the ornaments timeline ends up in the same place as it starts so you don't need to do that). https://codepen.io/GreenSock/pen/GRgYOjj?editors=0010 Side note: you can use the delay or repeatDelay properties instead of empty tweens if you'd like.
  19. I might do something like this using modifiers + utils.wrap: https://codepen.io/GreenSock/pen/JjomydK?editors=0010 @GreenSock Any idea why hue: "+= 360" doesn't work in the above pen? It just acts like hue: 360.
  20. Hey Shane! Welcome. Could you describe your goal a little more clearly? Namely: What format would the initial palette of colors be in? How do you want to loop it through the entire spectrum - is keeping the S (saturation) and L (light) values but rotating the H (hue) sufficient? or do you need more variance than that?
  21. There are several ways you could set that up. One way is to use the onComplete event of the second box: https://codepen.io/GreenSock/pen/dyPgWJa?editors=0010 Notice that I saved the first tween to a variable so that I could reference it later in the onComplete.
  22. Hey abbe and welcome. Please do not try to mention/ping random users. Just post your question and most likely someone will answer it Z index cannot work with SVG elements. The only thing that determines layering within an SVG is the order in which the elements are placed with the later ones being put on top. I'm sorry but I don't understand what you're trying to do in that demo. Can you please describe your goal more clearly and remove any parts of it that are unrelated to your question?
  23. Again, you'll have to be more clear with what "a while" means. Do you mean after a certain number of repeats? After a certain amount of time? After the user interacts with it in some way?
  24. There are lots of ways What do you mean "a while"? You could change the repeat count to be a positive number and it would go for that many times. Or you could pause it by calling .pause() on the timeline (if you're using one) after a set amount of time using .delayedCall() or based on a user's interaction.
  25. No. You likely don't need to register the plugins at all since you're just using plain HTML files. You need to load all plugins in their own script tags after GSAP is loaded but before your build file.