Jump to content

Carl last won the day on December 31 2022

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. yeah, that's a good work around as setting the to() value explicitly prevents it from getting wonked by the invalidation. I guess we just have to see if this merits an official warning or documentation about using from() and invalidateOnRefresh together.
  2. Hi and welcome to the GreenSock forums, Thanks so much for providing the very clear demos, it's so helpful. It appears removing invalidateOnRefresh or setting it to false will make things work as you expect https://codepen.io/snorkltv/pen/RwQqpPo?editors=1010 With from() tweens they render immediately, meaning that when your page first loads the opacity gets set to 0 and the tween is created that will animate opacity from 0 to 1. However, it appears those tweens are also being instantly invalidated leaving the opacity at 0. then the tweens are created again using opacity 0 as the start state. Now your tweens are trying to animate from opacity 0 to opacity 0 which means the opacity will always be 0. This is just my guess at what is happening. @GreenSock can offer more insight as to whether its a bug or expected behavior. EDIT: it looks like you just found the invalidateOnRefresh cause. nice work!
  3. Thanks for putting in the time to experiment and provide that demo. Great job! A set() is a tween object with no duration so there is a little bit of overhead involved. A new object is created with its own methods and properties. In your situation you are going to be using many set() calls 60 times per second. There could be some performance implications with lots of objects animating at once. I don't have time to implement this for you now, but take a look at quickSetter() Also, @GreenSock may be able to weigh in with some better advice
  4. If I understand correctly, you should be able to do all that you describe. GSAP is built to animate any numeric property of any object JavaScript can touch. Those properties can also be "function-based" It's probably one of the most under-utilized features of the platform. I updated two demos from the archives Custom Object with getX and setX methods https://codepen.io/snorkltv/pen/mdXmLXg?editors=1010 For this to work the functions must have matching names like setMyProp / getMyProp or setOpacity / getOpacity. Custom Object with getter/setter function https://codepen.io/snorkltv/pen/JjpNvLv Both use an onUpdate on the tween for the purpose of just proving the values are being changed. Your objects can have their own code to handle whatever rendering or refreshing of the canvas that needs to take place when values change. Original thread for reference below. There is an additional demo in there from @GreenSock
  5. You also might be interested in registerEffect() Once you put a little time into making an effect, they require very little code to customize https://codepen.io/snorkltv/pen/LYNBZww
  6. To "load the plugin" into Animate you would just provide the url of the MotionPath plugin js file in the exact same way you are loading the gsap javascript file
  7. Sorry I can't be of much help here. I haven't tried MotionPath with Animate (or really touched anything with JS and Animate in quite awhile). Back in the day I would probably just use a movie clip that had a hand-drawn motion guide in it and then control the movie clip with gsap. I'm assuming that as long as you have access to the svg path data you want to use you should be able to feed an Animate symbol as the target of a MotioPath tween.
  8. That's a great demo, @Cassie thanks for posting it here!
  9. to scroll to a label position without animation try the labelToScroll() method with duration:0 or use a set() https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll() i'm guessing the animations you bypass will just be set to their end state when you get where you're going, but again, a minimal demo would go a long way. we don't need to see anything complex.
  10. Cool fly! in situations like this another option is to create the infinite animation and then control it inside another timeline. In the demo below I tween the time() value of wings timeline from the main timeline. https://codepen.io/snorkltv/pen/XWZbeYO?editors=1010 We can have fun with the speed of wings flapping by changing the duration on the time() tweens. Notice the last tween tweens to a time:4 in 1 second (very fast going up) .fromTo(wings, {time:0}, {time:4, duration:1}, "<")
  11. Hi, Nice job on the site. It isn't feasible for us to troubleshoot a live site of that complexity, however I noticed you are using an older version of gsap (3.5.1') I'd suggest updating gsap and all the plugins to the latest version 3.10.4 as there have been quite a few improvements lately.
  12. yup, and we were trying to help. sorry if any of it came off the wrong way. glad you got a solution working.
  13. Hi @Rhinoo Yup, I understand the perspective you have here "B shouldn't need to know about how long A is active for". As you said you could just just use a loop and get the delay from the previous index. There just isn't something in the api that specifically says "wait this long after this animation finishes before doing something else". But there are many ways to accommodate that as noted above. I think you are going to soon find that as you develop slideshows and quizzes like this where you need custom delays, custom transitions, and even allow non-linear navigation (user can jump from any slide to any slide)... timelines are going to break down fast. You may be much better off with a function-based approach where you have discrete functions for animating things in managing delays (showing progress bars, timers, etc) removing current slide I often take an approach where I'll have a function like aniamteIn(index) { // trigger the animation that animates the "index" slide in // when that animations finished fire an onComplete that triggers the delay via the wait() function } wait(interval) { // wait for interval to expire // show progress bar or timer // when done fire functions to animate the current slide index out //animateOut(index) // animateIn(index++) } This is a very rough outline but this setup allows you to animate FROM any slide to any slide with any animation you want and any custom delays. It even can be fully automated as each animation and function just triggers the next in the array of things. You could build it all out off of a single array as you mentioned. This functional approach can become a bit cumbersome to track through as you add features. more advanced programmers might prefer an object-oriented approach where you have Slide Objects and a TransitionManager that does all the heavy lifting. The point here is just that timelines are EXCELLENT for building sequences that need to play straight through on their own or perhaps need scrubbing or reversing. As you add more complexity you will find you will have much more flexibility generating specific animations on demand (via function calls) and handling delays / timers / progress separately.
  14. In the GSAP API and the English language, a delay offsets the start time of something. Using the delay or position parameter are literally the most logical and clean approaches for what you describe. The alternate approach @mvaneijgen supplied (adding an empty function later in time) is valid for adding "dead space" to a timeline. In addition you could also add a tween on an empty object that tweens nothing for 3 seconds gsap.timeline() .to('h1', {x: 100}) .to({}, {duration:3}) // 3 seconds of dead space .to('h1', {x: 0}); It could be argued though that this is the least logical approach If you literally want to pause the timeline for x amount of seconds and then have it resume, perhaps this video and demo will help Notice that the playhead literally stops during the pause https://codepen.io/snorkltv/pen/poJjZxR hope this helps!
  15. Yes, most browsers by default don't have smooth scrolling available. It sounds like you are looking for GreenSock's new ScrollSmoother Be sure to watch the video in the docs I added it to the demo you posted https://codepen.io/snorkltv/pen/MWrdgmJ?editors=1010 Better? ScrollSmoother is a bonus plugin for Club GreenSock members
  16. pretty sure you are only supposed to have one ScrollSmoother instance for the entire page found this in the FAQ in the docs Can ScrollSmoother be applied to the contents of individual elements instead of the whole web page? No, ScrollSmoother is intended to be used to smooth the scrolling on the overall page, not individual elements.
  17. Carl

    Filling circle jumps

    I'm not quite sure how you are going to fill from the outside in. if you have a solid background color maybe use 2 circles. Maybe look to svg. If you want guarantee the circle fills ANY viewport size, I learned this 142 vmax trick from @OSUblake https://codepen.io/snorkltv/pen/JjOJJWN Full lesson video explaining how it works https://www.creativecodingclub.com/pages/free-lesson-vmax If you want to fill window exactly you can determine the distance from center to a corner of the viewport to get the radius another demo from my courses (you may need to re-run to see the circle animation) https://codepen.io/snorkltv/pen/NWNrbay?editors=0110
  18. Hi Thanks for the demo. It's always good to start with small examples like this. Good job! I think you are just looking for scrub:true https://codepen.io/snorkltv/pen/dyJjEwK?editors=0010 Hopefully this helps
  19. give all the tweens a position parameter of 0. if you need more help please provide a minimal demo so we have some idea of what your code looks like and what you are trying to do. thx.
  20. i would most likely do something very similar to what @mvaneijgen provided above. However, it's also worth looking at this demo from @OSUblake which relies on the Flip Plugin and requires very little code. https://codepen.io/GreenSock/pen/pormXeP Also, I imagine you were just experimenting, but be careful trying to implement code like this let tween = gsap.timeline(pTarget) tween.play(pTarget) it isn't part of the API to pass elements into those methods
  21. Hi and welcome to the GreenSock forums, Without seeing all your code, my guess is that the functions like getMy10sAnimation1() are not returning the animations as shown in the demo below. Your functions are probably just creating the animations as soon as being called. You could log masterTl.duration() for further investigation. https://codepen.io/snorkltv/pen/jOYxVpm??editors=1010 If you need more help please provide a minimal demo
  22. As noted previously the speed is going to all be determined by how fast user scrolls how large the scroll area is (determined by position of end markers) the relative durations of all the animations to each other another factor is easing on the individual animations. I added a power3.in ease to the large circle growing. this means it will scale at a slower rate at the beginning, but of course if the user scrolls super fast... it will still be super fast. https://codepen.io/snorkltv/pen/NWXYzZv?editors=1010 Also consider that on a large screen the circle has to grow bigger than it would on a small screen in the same amount time also lending itself to grow faster. Glad you were able to find this demo helpful. It's from my course ScrollTrigger Express, packed with over 25 lessons to help folks better understand how ScrollTrigger works and avoid the issues that commonly drive them to the forums. If you are just starting with ScrollTrigger I think you'll find it a tremendous help. The mix-blend-mode works nicely to fill the text, but If you want to really replicate the effect you referenced with the color changing (black and white) check out @PointC's tutorial on svg masking https://www.motiontricks.com/invert-svg-text-with-a-mask/
  23. oh, and if you check the docs it looks like SmoothScroller also has its own scrollTo method https://codepen.io/GreenSock/pen/KKXZOyZ https://greensock.com/docs/v3/Plugins/ScrollSmoother
  24. thanks for the demo, if you keep things in the GSAP family with ScrollTo Plugin it seems to work great https://codepen.io/snorkltv/pen/abEYBwR?editors=1010 Someone from team @GreenSock can address if there is another approach or known caveats with the native behavior
  25. if I understand correctly it sound like you just need the ScrollTtrigger's end value. https://greensock.com/docs/v3/Plugins/ScrollTrigger/end In this simple example I'm using the start and end values to scroll through a scrolltrigger when you press the jump button https://codepen.io/snorkltv/pen/jOagaPX?editors=0110