Jump to content

Carl last won the day on October 13

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. 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.
  2. yup, and we were trying to help. sorry if any of it came off the wrong way. glad you got a solution working.
  3. 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.
  4. 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!
  5. 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
  6. 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.
  7. 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
  8. 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
  9. 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.
  10. 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
  11. 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
  12. 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/
  13. 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
  14. 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
  15. 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
  16. 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.
  17. 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
  18. thanks @GreenSock that explains the multiple events. didn't know about all those.
  19. thanks @OSUblake I didn't have much luck with refreshInit I found it odd that it was common that refreshInit and refresh both fired twice when instantiating a single ScrollTrigger. I thought it was just CodePen editor but I'm seeing it in debug mode too https://codepen.io/snorkltv/pen/PoEQEMw?editors=1010
  20. Also for the mods: in this case is there any advantage or disadvantage to using batch over just looping through the lines and creating a load of ScrollTriggers?
  21. Hi @Patte welcome to the forums, Thanks for the demo. This ended up being an interesting challenge for me that I could not easily solve. A few things to consider With text split into lines it is going to need to be split differently for various screen widths. If we use batch() the number of items to be animated is going to change as the screen width changes Text that is split is going to need to be reverted and resplit every time a resize occurs ScrollTriggers are going to need to be completely cleared out or rebuilt every time a resize occurs I thought the solution would lie in tapping into onRefresh. However onRefresh happens on initial creation of the ScrollTrigger so I got into an endless loop of reverting text, re-splitting it and creating a new ScrollTrigger that did the same stuff again... So I basically failed at my first attempt to figure this out. What I ended up doing was creating my own debounced resize event (only fires when resizing is finished, not while it occurs) called killAll() which does the following: reverts all the text kills all the ScrollTriggers created from the batch() calls the init() function which starts everything over again https://codepen.io/snorkltv/pen/wvpmaez?editors=1111 it seems to hold up reasonably well in my limited tests. Would definitely be interested to see if anyone or team @GreenSock members have a better solution
  22. if you want a ScrollTrigger to end when another trigger reaches a certain point you can specify another element as the endTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger
  23. I saw 2 potential problems. Your section in question appears to be the last on the page. This means there is a good chance the top will never reach the top of the window. You have trigger set to "top top". You also seem to want to change the trigger element to position fixed. that seems like a logic problem as a fixed element will never leave the viewport. in the modified demo below you can scroll to the bottom and you will see the background color turn red which verifies that the stick class is being applied. I set the start to "top bottom" so that we could be somewhat sure that section reached the trigger point. https://codepen.io/snorkltv/pen/vYpdOWL?editors=0010 in the future please take the time to minimize your demo and remove extra js, css and html. it was difficult to hunt down where everything was.
  24. Thanks for the demo. With demos it's always good to minimize them as much as possible so that they only show the issue. I had a difficult time understanding what you were describing. I didn't notice any lines animating. perhaps you meant a "a line of text"? but I didn't see anything wrong with the text either. However, the thing with a class of ".talent" appears to be the image of the person on the right? I think the issue you are describing is that the filter seems to flash. In this case it is necessary to have a starting filter value in the css. I added brightness(1) so that the animation would have a defined end state. Does this look better? https://codepen.io/snorkltv/pen/xxppYMb?editors=0110 i took everything out that wasn't related to the .talent tween as it didn't seem necessary to replicate the issue. If this isn't the issue, feel free to fork your demo with only the animation that needs work.
  25. yes, add a callback at the same time as your label using call() that callback can take an array of parameters that you can use to update your nav. assuming your nav elements are in an array... // insert your updateNav function call at the "label3" label and pass in index value of 3 tl.call(updateNav, [3], "label3"); next you just have to have your updateNav() function activate the nav element with an index of 3 and de-activate the others. function updateNav(index) { navItems[index] // ...do stuff }