Jump to content
GreenSock

Leaderboard

Popular Content

Showing content with the highest reputation on 04/28/2021 in all areas

  1. Hello again! I've done some looking into the matter. It appears to be a combination of a few things together. 1) I am almost certain the errors you are reporting are to do with the Node version. 2) Once you actually get past the Node issue, you'll get the test failing still because on your mount lifecycle there are calls to $refs. The test fail because Jest expects those to be actual DOM elements but as they are $refs, they are not. This is an issue on this test because this is not a E2E test, it's only a unit test. I have no experience with Jest, the only way I managed to get around this is to not use the $refs but use GSAP's own selector engine and IDs. For example: use "#myRect" instead of "this.$refs.myRect". It appears the issue is not with GSAP at all but the fact that the test is trying to compute DOM elements that are not present due to the $refs. Actually, all of my comments are based on a sample project @Rodrigo gave me... But, hopefully it will be the same in your case @sybilrondeau
    4 points
  2. I've had a poke around your repository. What Rodrigo suggested earlier on: using a local copy of the script from your statics folder seem to do the trick. You forgot to convert some of your code to account for that, the IconButton.vue was still referring to the .tgz version. Changing that to use the static folder version has made the error go away. The test pass now when I run it. There are other errors logged but I think they are other things for you to take care of, the test itself reports as passed. Another thing to mention is that I see you have been using Yarn. I didn't, I don't have it installed and wasn't going to bother downloading it, sorry. So I used NPM. I don't know if that will be an issue or not, thought I would mention here.
    3 points
  3. GSAP will still use rAF, but the smoothness is ultimately going to be determined by how many frames there are. The same goes for canvas. The more images you include, the smoother it might be. Just a simple demo using video. https://codepen.io/osublake/pen/c1416a0b271d6a7d5efa8a2c0d97e839
    2 points
  4. Could you tap into the window.innerWidth @limbo ? ScrollTrigger.create({ trigger: '.my_elem', start: () => 'top ' + window.innerWidth*0.1, end: () => 'top ' + window.innerWidth*0.1, onEnter: enterFunc, onLeaveBack: leaveFunc }); If not, a demo would really help claryfying your scenario and finding out what could work best for you https://codepen.io/akapowl/pen/cf50ebc76a4f144ab1fab97c62aa979a
    2 points
  5. yes, new lessons go out every Wednesday and enrolled students get an email notification. be sure to check your spam folder
    2 points
  6. Are you able to share a minimal implementation of your project that recreates the issue? Rodrigo gave me a basic Nuxt project he setup that had some issues on it. I was able to work around those issues. Maybe we can achieve something similar?
    2 points
  7. Welcome to the forum @djdnl13 Sure, there are actually multiple approches you could use. Here is one example that makes the whole thing a timeline. You'd probably want to read up on how durations and the position paremeter work with tweens/timelines that have a ScrollTrigger with scrub applied to tweek everything to your liking. I also added some non scrubbing animations on the header in the top left corner, calculating when to trigger them based on the body as the trigger, triggering when each of the panels hits the top. Hope this is a bit helpful. https://codepen.io/akapowl/pen/5d5c54eb5dd09c9a4322f108b8708acb
    2 points
  8. Hi @zzkevinlim I admire your ingenuity and since you are a Club GreenSock member already I'm happy to extend a little offer to you. You can grab a Single User Lifetime membership for only $89 (only 20 bucks more than 1 year) Just choose the "lifetime + friend" plan and use code shiny at checkout to take $30 off the $119 price. When I see that code used I'll know not to issue a free friend coupon. This coupon will only remain active through Wednesday of this week for you or anyone who happens to stumble through these parts.
    2 points
  9. It wasn't really "chosen" - we were following the SVG spec, that's all. Browsers use the top left as the origin by default for SVG, whereas other DOM elements use "center center". Kinda annoying, I know. But we try not to violate the spec unless there's a REALLY good reason. Looking forward to the next newsletter! 🙌
    1 point
  10. Hey @akapowl You are a life saver, thank you so much!
    1 point
  11. Hey @JoeH I once made a demo that essentially does exactly what you are describing above. Maybe this can get you started. https://codepen.io/akapowl/pen/7c9f1aaa4340ace9c4a05102ba89a962 If for whatever reason you can not pin the section, I would recommend wrapping all your content in a div, and pinning that wrapper, so for ScrollTriggers that are supposed to trigger tweens on elements inside that section you could still use the body as the trigger to calculate their start/end. Hope this helps. Cheers
    1 point
  12. You're server just seems really really slow. The canplaythrough event is just an estimate of it can play all the way through. You might have to fetch the video, kind of like someone did in this demo. That's where I stole that video clip from. https://codepen.io/shshaw/pen/9e810322d70c306de2d18237d0cb2d78
    1 point
  13. @GreenSock would have to answer why GSAP defaults to the top-left of the element instead of the center, but I'm guessing it's because the smooth origin feature came later. If you've worked with complicated transforms before, like with canvas, you will know that changing the transform origin can cause the element position to change.
    1 point
  14. Hi, Can you provide a reduced live editable sample in codesandbox? With the information you provide is a bit hard to pinpoint what the problem could be. The only guess I can take is that you're adding more elements dynamically and that is messing up the current set up. For that you'll have to create a separate useEffect hook where you create the initial setup and the endless animation when the amount of text elements change. Happy Tweening!!!
    1 point
  15. Hye @violacase You could for example wrap individual parts in your HTML markup, and target those specific parts/wrappers for individual splitTexts (and adjust the formatting of the selectors for the special words in CSS accordingly). Then you could add tweens on those seperate parts to your timeline and position the second tween via the position parameter, so it has a break inbetween the two parts. Could that be an option for you? https://codepen.io/akapowl/pen/637669d2af626ec709ad23b6969189d6
    1 point
  16. There is a difference between `get_template_directory_uri()` and `get_stylesheet_directory_uri()`. `get_template_directory_uri()` always gets the parent theme directory `get_stylesheet_directory_uri()` get the directory of the current theme (eg the child theme directory) maybe this is your issue, but it hard to tell with out seeing a live demo
    1 point
  17. Thank you, I didn't suppose this option would works. EDIT: Here is a exemple I found using .toArray() and .forEach() https://codepen.io/GreenSock/pen/GRjWxaJ?editors=0010
    1 point
  18. Hello, just to butt in with more question... Can I check which version of Node the two of you are using? I had issues the other day with dependency modules with a similar error: SyntaxError: Cannot use import statement outside a module That was caused because, if I remember rightly, anything below Node 14 cannot parse some modern thing or other that these dependencies have. I have Node > 15 and do not have the errors you are reporting. However, updating Node will NOT solve this issue as Jest is still complaining about Element and/or SvgElement not being of the correct type. This, I think might be an issue how it sees the GSAP object. I'll have a look and probably have @GreenSock himself have a look as it's probably going to take some brain power beyond mine to untangle this.
    1 point
  19. Is there a problem on mobile? That tool is just an emulator and shouldn't be used for actual testing.
    1 point
  20. I have never used this yet. But it seems that you just need to create another batch and call those elements. Here is a forked pen with animating the name https://codepen.io/stefanomonteiro/pen/LYxvLMm
    1 point
  21. The calculations will be wrong with relative. The modifiers wraps based on the translated X position, but with relative, you would also have to take into account how far left the item is initially positioned. BTW... this thread has a helper function that may be of use.
    1 point
  22. Hey @rguarnizo Unfortunately I have no experience with React, so I can not tell you much about the why, but wrapping your .to() with that scrollTrigger attached in a timeout function as suggested in this thread here seems to resolve the issue for me. useEffect(() => { brandsRef.current = gsap.utils.toArray(".brand"); gsap.set(brandsRef.current, { autoAlpha: 0, scale: 0 }); setTimeout(() => { gsap.to(brandsRef.current, { autoAlpha: 1, scale: 1, delay: 5, scrollTrigger: { trigger: ".Products", scrub: 1, start: "top top", markers: true, end: "+=100%" } }); }); }, []); Does that work for you? https://codesandbox.io/s/tender-germain-pmtvb?file=/src/components/app.js
    1 point
  23. 1 point
×