Jump to content

flowen

ShockinglyGreen
  • Content Count

    37
  • Joined

  • Last visited

Community Reputation

13 Newbie

About flowen

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    anywhere my iphone is

Recent Profile Visitors

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

  1. @StefanHinck I stayed with TransitionLink because it offered me the customization I needed for my animations. Anilink doesnt and its made for some quick out-of-the-box page-transitions but not much more than that. I had a quick look in the docs and I see no support for length of the animation The dev himself admits he really doesn't want you to use it No worries, we all start somewhere. I "should" be using chrome's debugger tools after 10years of frontend but still love console.log haha So: AniLink for some quick page transitions transitionLink for some cool custom work
  2. hi Victor, a late congratulations! I was wondering, now 2 months later, did winning an award give you any (remote) freelance work? Did you get more leads? How do you feel now and what are you working on?
  3. @StefanHinck I had been playing around a bit with TransitionLink too. If you console.log(node) you will see that node, depending whether you are in the exit or entry context, is referencing to a whole new page (I use Gatsby, but it depends on how your components are set up). So in the exit context, node will be the current page and in the entry context it will be the new page. If you set length to a high number, you will see the div appear temporarily in your inspector
  4. ahhh! I'm happy it was a quick answer indeed :)
  5. quick question.. hopefully I was a 100% sure TimelineLite has .stagger functions and so do the docs. But when I import them with npm, they are undefined This is in a Gatsby (react) project with gsap 2.1.2 `console.log(TimelineLite.staggerTo) ` undefined
  6. @PointC This IS Amazing! Thanks so much for the extra effort of explaining! I should've inspected the path a bit more closely and I would've recognised the fills and double paths. Your other sources are amazing extra help This shows me how illustrator outshines Figma (with figma I have to do a lot of manual work). and thanks @Carl for putting some of that pressure ✌🏽;)
  7. hi @PointC thanks for fixing this! I wonder how you fixed this, because I want to do this for a bunch of letters
  8. hi @Shaun Gorneau thanks for your reply. The reason I use definitions is because I want to use the letters more often.. I could do without, but would prefer to make this work. I see.. I made a rooky mistake πŸ˜‚ alright, I adjusted it to the path, but it's still not drawing it. I also simplified the example a bit. in the edited codepen I still see stroke-dashoffset: -2476.59; stroke-dasharray: 1e-05px, 2486.59px; (use the inspector and check the path of the svg) I'm not sure if stroke-dasharray is supposed to have such values or it's a bit strange.
  9. Inspect the codepen preview window to see the values on the svg. I've tried exporting from Illustrator and from Figma (using SVOMG), but no difference in the result. Anyone an idea how to fix this? the values: element.style { stroke-dashoffset: -1; stroke-dasharray: 1e-05px, 11px; }
  10. @OSUblake nice! Thanks so much for figuring this out and explaining what I did wrong. This makes complete sense. I actually used this pattern in other components w the observer as well, but got away with it because I would unsubscribe after firing once πŸ˜‚ Also the example you shared looks great!
  11. I saw your reply and I knew something was wrong: somehow it didn't save the project. I created a new version, but it seems stackblitz has some problems. I have the sample ready, saved several times now and whenever I reopen the same url I get to see the old code. Strangely I can download the source code, with the correct code and files, so instead I'll attach it. Funny enough I also see different behaviour now Now I wonder if this might be a stackblitz thing .. Anyways: When I scroll up during TL-3, it does correctly pause and play when I scroll back down. But: - on first view TL1+2 are immediately completed, without being played This happens more randomly it seems: - When I scroll down, seemingly randomly, the timeline gets stuck and 'TL-3 completed' is continuously being logged. or: - even stranger: the timeline pauses work fine. But TL-3 takes an awful lot of time to start playing again. This is a sample log from this behaviour: react-x8dna1.zip
  12. Hi Rodigo, Awesome, I posted the simplified sample here (can edit). So I noticed some interesting behaviour: If you scroll down, the animation starts (all good). If you scroll up in the middle of the animation - easiest done with the 3rd step - and go back down, you see the animation has continued. But the logs (oncomplete) don't show that. Then the next iteration, the logs will accumulate. So if you wait for the timeline to play again, I can see tl3 logs 2x and this keeps adding up. I'm curious to see how you would debug it @Rodrigo. I logged the ref to the observer, but I'm not sure that's what I should be looking for.
  13. @GreenSock Ah apologies! Never thought of this. I removed the link in the first topic and will try to move the public repo (not sure if I can though, netlify seems to only work with github and not with bitbucket)
  14. So the codepen does work, silly enough. Surely there's a difference. I use a clickhandler in the codepen, but I use the intersection Observer to fire the pause event. When I log .paused() It always returns true (using the intersection observer). But visually I can see the animation hasn't paused (scrolling up and back down) I tried setting it with both tl.pause() and tl.paused(true)
  15. I completely understand now @Osublake Thanks again for the explanation. Anyone reading this.. from different child components I return the timeline to the parent to play it. When using a timeline instance I noticed, the .set wouldn't immediately work. Which makes sense because I pause the master timeline in the parent component. So went for Tweenmax in this case