Jump to content
Search Community

PointC last won the day on January 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    5,126
  • Joined

  • Last visited

  • Days Won

    413

Everything posted by PointC

  1. Second time this week I've been 'GreenShocked' by @GreenSock. Just FYI - I have stolen your SVG creation function.
  2. I'd second @Sahil's recommendation to join Club GreenSock. With what you're doing, those bonus plugins will save you a bunch of time and your membership will pay for itself quickly. You'll also save on aspirin as you'll have fewer headaches dealing with browser inconsistencies. More info here: https://greensock.com/club Happy tweening.
  3. Sorry, you've lost me now. I'm not sure you'd need multiple dashed circles and masks unless I've completely misunderstood the desired outcome here. Do you happen to have a demo we could take a look at? Thanks.
  4. The issue with my CodePen demo is my CodePen demo? Is that like when we type 'Google' into Google and rip a hole in the space-time continuum?
  5. I love SVG clip-paths or masks for this type of work. Pretty much the same thing I did in this demo except the text is linked to the timeline progress. Hopefully that helps or at least gives you some ideas. Happy tweening.
  6. I just thought I'd better give you a hard time about your profile pic since you were giving @Shaun Gorneau a hard time about naming his demos.
  7. Nice work @Sahil I was just starting on something similar when I saw you post your solution. I think animating the d attribute string is a better approach in this case. I think morph might be a bit tricky. I haven't tried it, but I have a feeling it wouldn't be quite as smooth. Well done! PS Why don't you have your picture on your CodePen profile? How can I be sure it's really you?
  8. Yep - your demo seems fine in Edge now. I threw a rotation:0.1 onto my demo and that seemed to solve things too. Weirdly, everything works correctly in IE11 without any extra fixes so I assumed Edge would be okay, but that's what I get for assuming. Edge is really starting to get fussy.
  9. @GreenSock - somebody's getting fancy today. Nice! I've been 'GreenShocked' I was just about to tag you into this thread. After I posted my demo, I looked at it in Edge 41 and I'm seeing some weirdness. Your demo is doing the same funkiness as mine. The line sometimes draws a bit, other times not. If you resize the window, it then suddenly appears. Maybe this is a CodePen/Edge issue, but thought I'd mention it and see if you can confirm? I'm using Edge 41.16299.248.0.
  10. I'm not sure I follow. Do you mean the white rectangle in my demo? If so, that can be removed (or change the color) and the mask will still be fine. The white stroke in the mask is just what will be revealed, but it doesn't have to be over white. Is that what you meant?
  11. Hi @DevSaver For a dashed line and DrawSVG, you'll need to use a mask. I wrote about that here: Using variable shouldn't be any problem. You could do something like this: You may also want to take a look at our big 'circle start point' thread. Hopefully that helps. Happy tweening.
  12. PointC

    rotateY problem

    Hi @mbower Welcome to the GreenSock forum. Looks like you're getting some elements stuck with rapid hovering. If it were me, I'd create a timeline for each element and play/reverse on hover. That way nothing can get stuck in the 'back' position. Something like this: You'll also see that I added a .trigger class around each of your rotating containers. I did that because each of the rotating containers was the trigger and if you moved the mouse during the rotation, it would sometimes no longer be over the element and trigger the reverse. By adding a trigger div that isn't part of the actual rotation, the mouse is always over the target element throughout the rotation even if you move it a bit. I don't know if that's what you'll want to do in your final project, but it's just an idea. Hopefully that helps. Happy tweening.
  13. If I understand your desired outcome correctly, I think you'd want to use svgOrigin instead of transformOrigin. var pieFromLand = { opacity: 1, rotation: -120, svgOrigin: '171 171' }; More info: https://greensock.com/gsap-1-16 Happy tweening.
  14. Hi @jemes You should be able to correct that by setting your svg overflow to visible in your CSS or scaling the entire SVG instead of the path. Happy tweening.
  15. Well, there you go. Even better.
  16. You should be fine. You just can't have the same mask ID. The same class of path that draws the mask should be no problem. Happy tweening.
  17. If you watch the animation in the console, you'll see that the second group of masks is drawing correctly and at the right trigger. However, they are not affecting the appearance of the second set of branches. I think the problem is the second SVG is picking up the masks from the first SVG since they have the same IDs. I pulled the branches out of your site and put them into a pen. (Squeeze to a narrow window to watch both at once) Notice the 2nd copy of the SVG has the <defs> commented out and yet the masks are still working correctly. I think you'll have to switch to unique mask IDs.
  18. Look at @OSUblake go today - two ScrollMagic answers without rewriting the entire project and using his catchphrase. I find anything involving ScrollMagic much easier to debug with the addIndicators plugin. You'll immediately see if the triggers are where you think they are. http://scrollmagic.io/docs/debug.addIndicators.html
  19. Yep - Blake is exactly right. You have to create a timeline for each of the mask groups that are hitting separate ScrollMagic triggers . Declaring the variable inside the loop should take care of it for you. Happy tweening.
  20. Be sure to follow @OSUblake on CodePen too as he's the Canvas Man. https://codepen.io/osublake/ When you get stuck just whisper 'canvas canvas canvas' in your thread and he sometimes magically appears.
  21. Thanks for the demo, but that is still a whole lot of code to look through. I'm actually not sure what the question is either. You mentioned things don't go smoothly. Do you mean they stutter or don't animate at the correct time? I'm just not clear on the nature of the problem. One thing I do see is a bunch of CSS transitions on elements. Are you perhaps creating a conflict between GSAP and CSS animations? That can definitely lead to things not running smoothly as there would be a fight for control. If you could trim that demo down to just a few elements to isolate the issue, I'm certain we can point you in the right direction. Happy tweening.
  22. hmmm.... I'm not sure then. It's not related to GSAP, but it does seem something that's specific to Edge. @Jonathan is the all-knowing Oracle of CSS solutions. If he's around, maybe he'll jump into the thread with some good ideas.
  23. I'm wondering if you're expecting an animation on something like this? tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9); That will take 1 second on the timeline, but won't actually animate. It will just disappear at the end of the tween. Were you perhaps wanting autoAlpha there? That would fade the element and then set the visibility to hidden. I'm just guessing here, but as @Shaun Gorneau mentioned, a demo will be necessary to give you accurate answers. Happy tweening.
  24. I see what you mean in Edge. I removed the perspective in the .outer div and it all seemed fine to me after that. Happy tweening.
  25. If you have multiple buttons, you'd want to loop through and create a timeline for each one. Something like this: I'm using jQuery each(), but if you aren't using jQuery, you can use the querySelectorAll() method to get all the triggers and loop through that NodeList too. Hopefully that helps. Happy tweening.
×
×
  • Create New...