Jump to content
Search Community

danboyle8637

Members
  • Posts

    45
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

danboyle8637's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

14

Reputation

  1. @GreenSock Yes that seemed to work. Strange since the base gsap works fine. I'll keep messing around but thank you for your help!
  2. I just renewed today so I'm not sure this has something to do with it... but my bonus plugins are not loading. I'm using NextJS (newest version), React. I am using Typescript as well and I noticed the DrawSVGPlugin was a JS file. import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin' const MyComponent = () => { // I tried this outside the component as well as... // And in a useEffect that runs when the component mounts. gsap.registerPlugin(DrawSVGPlugin) useEffect(() => { tl.to(element, { drawSVG: '0% 100%' }) }, []) } I am getting the following error It's attached.
  3. Just a question I was thinking about... I didn't see it in the docs. When creating an snap function... the endValue... where is that being calculated from? The top left (0,0) point of the draggable element?
  4. Is there anyway we can get access to the value of the drawsvg while it's tweening? I didn't see anything in the docs... other than the live attribute which made me think it might be possible.
  5. @Rodrigo Thanks, but I think I have this working. At least on my code sandbox project. I am going to be testing it on my dev site and across browsers to see what happens but I am not losing any animation performance when my SVG gets triggered by the intersection observer. The short of it was I think two things. One... I have an "exit" animation that's slightly different so when the SVG goes out of the root, it runs that animation. Then when it comes back into the root, it runs the "original" animation. Two... I am using state to trigger the animation running. I'm not sure if my thought process is correct, but because I'm triggering a rerender of the component and the animation is changing, I'm getting a new instance of the animation. I think that thought process of what react is doing is correct. Anyway, after I test it some more, I'll report back.
  6. Thanks! As I was researching the best ways to do scroll animations... that's when I learned about intersection observer. And for performance reasons, "they" said to stay away from scroll events because the window is constantly listening even when the element is out of the viewport. My needs are pretty small... I think. The most animations I have are on a page where I have small benefit paragraphs with a SVG icon. I wanted to animate these icons on scroll. Some of them just for user experience (something cool)... some of them because they help show what the benefit paragraph is talking about... a little demo. I've used scroll magic in the past and it seems to work fine, but I feel like I always need to be on the bleeding of performance and page speed. Thanks for the demos. I'll have to dig into the moon landing one for sure.
  7. @Rodrigo @mikel Not sure... I changed my code sandbox and moved the animation to the SVG component. https://codesandbox.io/embed/intersection-observer-svg-tweenmax-u6ief It works or at least seems to but if you scroll up and down the screen... you'll notice the animation starts to "die"... it moves less and less each time. But the isIntersecting property still fires correctly. I've tried it will TweenMax and TimelineMax but they both do the same thing. I wanted to use Intersection Observer because it's performant... and I don't think ScrollMagic uses it... it still listens to scroll events... I think. Is ScrollMagic still the best option for scroll based animations?
  8. Nevermind. I'm still getting some strange behavior with the animation. I must be a react thing. I'll update my example once I run through a few ideas. I also look at this tutorial again which helped. https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5 A little confused on how a state change is handled from within a ref... but that's a react thing. But by returning the entry that's being observed... and then using the isIntersecting property... you can trigger the animations and it does work. Now I need to test it with 10 or more observers on one page! Thanks! @mikel Thanks too for you pen. I like to see all these examples.
  9. I asked a question about intersection observer here: I wanted to update because I got my intersection observer working. I set it up as a hook to watch DOM elements you pass in from any given React component. I found a three year old post saying that Intersection Observer has issues with SVG. And through experimenting, I found you can only observe the top level <svg> element. But through observing the <svg> as a whole, you can still pass a reference through to my observer hook to trigger an animation. In this codesandbox: https://codesandbox.io/embed/intersection-observer-svg-tweenmax-u6ief When you scroll down, you can see the little compass icon starts animating when it hits 200px from the bottom of the view port. But when I scroll the icon off the screen and back on, I can't get my animation to replay. I am using a TweenMax but I have tried to use a timeline and that doesn't work either. I hope my code is followable.
  10. @Rodrigo Thanks!! I'll report back if I can get all of this working correctly.
  11. @ZachSaucier no nothing ill has happened yet. My only worry at this point is making sure I kill my tweens and timelines appropriately. For example... in a component, I might call a tween like this: const Component = () => { const nodeRef = useRef(null) useEffect(() => { // imported up above of course... compassIconAni(nodeRef.current) return () => { // import TweenMax above // Does this kill the tween even through the actual Tween // is located in another file? TweenMax.killTweensOf(nodeRef.current) } }, [nodeRef.current]) return // Stuff } I'm not sure if that call to killTweensOf() actually kills the tween. Is there a way to figure out for sure if a tween is "dead"? I didn't see anything in the docs.
  12. My question is more of a best practice question. I'm in a react app and right now, I'm defining all of my tweens as separate functions and importing them when needed. Is there any reason why "you" should not define Tweens in a separate file? I'm doing this because I plan on passing them to a Intersection Observer as the callback.
  13. @elegantseagulls Nice. Cleaning up the animations worked. Is it a good idea to always kill and/or destroy animations when unmounting a component? I'm guessing yes. Thank you for the help!
  14. @elegantseagulls Ahh.... great idea! Nice thank you I am going to try this first thing in the morning. It makes sense... I hope it works. I'll report back.
×
×
  • Create New...