Jump to content
GreenSock

PointC last won the day on May 26

PointC had the most liked content!

PointC

Moderators

  • Posts

    5,071

  • Joined

  • Last visited

  • Days Won

    411

 Content Type 

Everything posted by PointC

  1. PointC
    Just modify your start/end percentages: https://codepen.io/PointC/pen/qBJzeYJ/892842f1056c3bd18093804305c0d32c Happy tweening.
  2. PointC
    Here's a quick demo with a loop through the targets and creating a simple timeline for each. Then we add the enter/leave listener to play/reverse the timeline on hover. https://codepen.io/PointC/pen/rNqbOxm Happy tweening.
  3. PointC
    In addition to @Rodrigo's sound advice, I'd add that you don't really need to worry about initial values with hover animations. You'd generally just create a tween or timeline and play/reverse on hover in/out. Thanks for being a Club member and welcome to the forum.
  4. PointC
    When you're clipping an H1 separate from the SVG, I'd recommend just using a container div for the H1 and setting overflow to hidden. Something like this: https://codepen.io/PointC/pen/EMOwaO Just a few other notes: You could save a lot of JS if you apply a common class or select an array of groups to apply your autoAlpha set(). Currently you have 20 identical set() tweens in a row. I'm not sure setting the autoAlpha:1 is necessary as that would be its default state. No need for <body> tags in the HTML panel of CodePen You can load scripts via the little gear icon on the JS panel rather than pasting the script tags in the HTML panel Happy tweening.
  5. PointC
    You'd really need to boil that down to a minimal demo and have a GSAP related question for us to answer. We just don't have the bandwidth to look through entire projects and 3rd party libraries. Just FYI - looks like you're loading a really old version of TweenMax (1.20.3) I'd strongly recommend using the latest GSAP version (3.11.5) If you have a specific GSAP related question, we're happy to help. Best of luck with your project.
  6. PointC
    Yep - the relative value on each iteration is the culprit here. There are a few ways to solve it, but I think the easiest is just to set the lines back to 0 after they fade out. Add this to the end of the timeline in the clearData() function and you'll be good to go. You also won't need relative y values on the tweens in that function with this change. Just y:20 will work perfectly. tl.set("#para-long-line, #para-short-line", { y: 0}); Happy tweening.
  7. PointC
    I'm not quite sure I follow. So the lines are supposed to only move on the first tween? Is that after the morph? If you can clarify the desired outcome a bit, I'll try to point you in the right direction. Thanks.
  8. PointC
    Since the morph already happened on the first tween of the timeline, it appears nothing is morphing for tweens 2 & 3. Easiest solution is to use a .fromto() tween rather than a .to() tween. https://codepen.io/PointC/pen/Jjmzdxp/6382a2db1d9550ba86e6e33f3f318b9a Happy tweening.
  9. PointC
    I'm not quite sure what you're trying to accomplish with the infinite repeats on some of the tweens, but this thread may offer some helpful info too.
  10. PointC
    Sounds like a good use case for clamp() https://codepen.io/PointC/pen/dygQaPj/da853be09052e3296cc321b566e75353
  11. PointC
    Looks like they have a waves section with two SVGs in it and then they animate the wave container div along the x axis. You can inspect the CSS to see how they've lined up the images. There are multiple ways to go about it. x translation, morphing, animate individual points of the wave. All can work. You would just use the same fill color for the waves as the next section of the page and it'll look like the waves are along the top of it. There are many wave animation threads around the forum. Here's one to get you started.
  12. PointC
    I'm not seeing anything move to the left. It all looks correct to me. Just my two cent approach, but for little arcs and circles, I like to use type:rotation for these types of interactions. Here are a few examples from a Motion Tricks tutorial that never got published. Maybe they will give you some ideas too. https://codepen.io/PointC/pen/dyggEJE https://codepen.io/PointC/pen/NWOOVYd https://codepen.io/PointC/pen/rNqqgvK Happy dragging.
  13. PointC

    SVG Masking

    PointC replied to SASHIKANTA's topic in GSAP

    There are a bunch of videos on YouTube to teach you how to use SVG masks. https://www.youtube.com/results?search_query=svg+masking
  14. PointC

    Draggable hit wall

    PointC replied to ppdemo's topic in GSAP

    You're looking for collision detection. There are several threads about the topic around the forum. Here are a few to get you started.
  15. PointC
    y transforms with the element you're using as the trigger can be a little confusing. Especially with two ScrollTriggers on the same element. IMHO it would probably be easiest to use a parent element around your .events and use that as the trigger. That way you're not animating the actual trigger element. Something like this should work. https://codepen.io/PointC/pen/VwEGVLK Hopefully that helps. Happy tweening.
  16. PointC
    No - there isn't a tutorial video, but searching YouTube should give you plenty of options. https://www.youtube.com/results?search_query=svg+clip-path
  17. PointC
    Sounds like you're looking for these: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/API/Element/className
  18. PointC
    I'm not sure I follow the question, but it sounds like you may be looking for the the isInViewport() method. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport() If not, a minimal demo would be helpful. Thanks.
  19. PointC
    1. Yes - that's usually accomplished with overflow:hidden. 2. Yes - but remember zIndex only applies to positioned elements.
  20. PointC
    Sorry - what do you mean a video? Like a tutorial?
  21. PointC
    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.
  22. PointC
    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.
  23. PointC

    SVG Masking

    PointC replied to SASHIKANTA's topic in GSAP

    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.
  24. PointC
    Just a bit of FOUC. This should help. Happy tweening and thanks for being a club member.
  25. PointC
    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.
×
Login Create Account