Jump to content

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

Carl last won the day on March 17

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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.
  6. That's a great demo, @Cassie thanks for posting it here!
  7. 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.
  8. 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}, "<")
  9. 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.
  10. yup, and we were trying to help. sorry if any of it came off the wrong way. glad you got a solution working.
  11. 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.
  12. 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!
  13. 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
  14. 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.
  15. 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
  16. 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
  17. 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.
  18. 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
  19. 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
  20. 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/
  21. 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
  22. 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
  23. 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
  24. in order to effectively tween a clip-path it helps to have an initial clip-path in the css like: .App { font-family: sans-serif; text-align: center; clip-path:circle(0% at 50% 50%); } better? edit: looks like my fork didn't save the changes, please test in your version.
  25. very good. i guess I missed that. If you would like more help please create a new, reduced demo. I suspect you could replicate whatever issue you have with 20% of the code you have and greatly increase your chance of getting quick help. When you make your demo please keep in mind the fact that no one here is familiar with your project or your naming conventions. ids like "scene-brush-alt" have no relation to what we see on the screen. same with "scene-7-alt". Also keep in mind that most of the people trying to help you are only fluent in English. better to have text that says "Section 1 Text" than "Die neuen Dr.BEST GreenClean INTERDENTAL" My best advice create 3 colored divs. This way we can clearly see where they begin and end. First section just creates room to scroll Second section is the section you want to toggle the class of Third section is the one you want to use for the endTrigger Start small and only add things that help replicate the issue you are facing. Hope this helps