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. Here's something similar from my demos: https://codepen.io/PointC/pen/MWwqrjO Notice the two lines move at the same time as the clip-path reveal. That's how you'll get the same reveal effect from your video.
  2. Glad you got it sorted. Just FYI - I think there were two issues. One was the FOUC. The other was starting the lines at "50% 50%". The former is easily fixed with a quick autoAlpha. The latter may not be so obvious. You were seeing the "dots" of each line at 50/50 because the stroke-linecap is set to round. If you need to start at 50/50 like that, you need simply add a quick scale tween before the stroke animates. Something like this: https://codepen.io/PointC/pen/YzJjMyJ/e9a42d9c21dac238ab76c0bd4d36e524 Hopefully that makes sense. Happy tweening and thanks again for being a Club member.
  3. PointC

    SVG Masking

    Pop that mask into your SVG and scale it up enough that it covers the whole screen. Give it a try and we'll help with any GSAP related problems you encounter. Happy tweening.
  4. Just a bit of FOUC. This should help. Happy tweening and thanks for being a club member.
  5. No idea what that site looks like as each time I try to visit, it just hangs and won't load. ?‍♂️ If you search the forum for "carousel", you should find several threads. Here's a good one to get you started. Once you have something started, create a minimal demo for any GSAP related issues you run into and we'll do our best to assist you. Happy tweening and welcome to the forum.
  6. Welcome to the forum. I'm not quite sure with which part you need assistance, but I've forked your pen and made a couple changes. I've used a label to animate the left/right lines at the same time. The opacity fade for line 3 wasn't working because it isn't an attribute - no need for the attr:{} wrapper on that one. https://codepen.io/PointC/pen/qBJyPjB/f67666b18e77e03393f8937257465bfa Just FYI - no need for html and body tags on CodePen. You can just paste your core HTML into the top panel and the CSS and JS in the appropriate panels as well. The use of labels is covered here: Hopefully that helps. Happy tweening.
  7. If I understand your goal correctly, it would be best to make the body the trigger. https://codepen.io/PointC/pen/OJBwxpg/4cfca8354a6819dacdba464b376353af Hopefully that helps. Happy tweening.
  8. snap: { textContent: 1 } https://codepen.io/PointC/pen/KKGBXaR/10c8677689d49df47fe1e690eca483cb Happy tweening and thanks for being a club member.
  9. You'd need to loop through each line and select the bottom/top .char in those lines and start all tweens at 0. Something like this. https://codepen.io/PointC/pen/OJBwJzd/b300c7bf37ea7a9567e1733d87bbbe30 Just FYI - you had an ease on the timeline itself, but timelines don't have eases. I moved that power4.inOut ease to the defaults for the timeline so it would be applied to each tween. Hopefully that helps. Happy tweening and thanks for being a club member.
  10. From your description, it sounds like you need to wrap that scrolling block of text in a parent container and pin everything while it scrolls. Here's a fork of your pen. https://codepen.io/PointC/pen/qBJKzLo Hopefully that helps. Happy tweening.
  11. Hi @KevinS Welcome to the forum. With two ScrollTriggers targeting the same element, you want to set immediateRender:false on the 2nd one. You'd also want to skip toggleActions when you're using scrub. Finally, I'd recommend a linear ease with scrub. Here's a fork of your demo with those changes. I think this works as you intended. https://codepen.io/PointC/pen/jOeKzRr/05a976e3c356393c5f4058c1b9e5fdfb Hopefully that helps. Happy tweening and welcome aboard.
  12. I don't follow what you're asking. Are you talking about a parallax effect. If so, you want the child larger than the container and set the speed to auto. From the docs: "auto" speed When you set the speed to "auto", it will calculate how far it can move inside its parent container in the direction of the largest gap (up or down). So it's perfect for parallax effects - just make the child larger than its parent, align it where you want it (typically its top edge at the top of the container, or the bottom edge at the bottom of the container) and let ScrollSmoother do its magic. Obviously set overflow: hidden on the parent so it clips the child. If that's not what you meant, could you please provide a minimal demo? Thanks and happy tweening.
  13. I'm not sure what you're asking. You want the photo sections to pin and reveal each picture? If so, check out pinning in the docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger If you post a minimal demo with what you have so far, we can point you in the right direction.
  14. That looks like it works correctly to me. Perhaps you want different effects for different screen sizes? If so, check out matchMedia(). https://greensock.com/docs/v3/GSAP/gsap.matchMedia()
  15. You could check if the target is is tweening and ignore the clicks. https://greensock.com/docs/v3/GSAP/gsap.isTweening() Or give the tween a reference, say 'spin', and then force the progress to 1 if the user clicks too quickly and spin is still active. So the code would be something like this. if (spin && spin.isActive()) { spin.progress(1); } https://greensock.com/docs/v3/GSAP/Tween/isActive() Hopefully that helps. Happy tweening and thanks for being a club member.
  16. I think this thread can help you. Happy tweening.
  17. Probably easiest to give each element its own timeline. https://codepen.io/PointC/pen/gOBKGZe/c45220bb9477f7805ca8c1ee07ae859a Hopefully that helps. Happy tweening. PS I'd recommend animating y instead of top for better performance.
  18. I think your spacing is a bit off with the "bottom bottom" end and the extra top margin on the smooth-content. I've adjusted those and added markers so you can better see what's happening. I assume this is more what you wanted? https://codepen.io/PointC/pen/abRKLJb/f13078e10896c86f7f165e57ab17f7a8 Happy tweening and thanks for being a Club member.
  19. Transform (scale, rotation) default points are in the center of HTML elements. Translation (x/y) is top left. If you want it to be in the center, try this. gsap.set(".box", { xPercent: -50, yPercent: -50 });
  20. You'll need to target the rectangle in the clip-path rather than the clip-path itself. This seems to work correctly in Safari for me. https://codepen.io/PointC/pen/vYVrYeV Happy tweening.
  21. This thread may point you in the right direction. Happy tweening.
  22. The clip-path isn't working in your demo because it isn't applied to the group holding the image. Line 9 of the HTML needs to be: <g clip-path="url(#mask)"> Happy tweening.
  23. Does adding this make any difference? #smooth-content { will-change: transform; } Happy tweening.
  24. That's all the demos that come to mind for me at the moment. I'd recommend searching CodePen for something similar if those demos don't work for you. If you have any GSAP related questions, we're always here to help with those. Best of luck with the project and happy tweening.
  25. Our own @OSUblake has a few examples that should put you on the right path. https://codepen.io/osublake/pen/mEpado https://codepen.io/osublake/pen/ezyyzG https://codepen.io/osublake/pen/reQdrN Happy tweening.
×
×
  • Create New...