Jump to content
GreenSock

PointC last won the day on October 30 2022

PointC had the most liked content!

PointC

Moderators

  • Posts

    4,990

  • Joined

  • Last visited

  • Days Won

    401

Community Answers

  1. PointC
    PointC's post in DrawSVG on sidescroll issue was marked as the answer   
    Hi @Ian Robinson 
     
    Welcome to the forum and thanks for being a Club member.
     
    Is this what you needed?
    See the Pen 4b2ce82c10dd89ff7ed572d4bf40dd5b by PointC (@PointC) on CodePen

     
    Happy tweening and welcome aboard.

     
  2. PointC
    PointC's post in Speed/Meter need help to work as items. was marked as the answer   
    Hi @buster808 
     
    Thanks for reading Motion Tricks. Glad to see you're having some fun with meters.
     
    In this case I think measuring the length of the path and tweening to an absolute length would be the easiest approach. I've forked your pen with a couple small changes. If we get the desired percentage by dividing your target count (600) by the hard coded max of 1140 and then multiply that by the max rotation of 180 you get the needle rotation. Multiplying that same percentage times the length of path we're drawing and you'll get the target length. Use those values in the tween and you'll get this.
     
    See the Pen b19e05f7c111c7d3a6ecef9762fc5c61 by PointC (@PointC) on CodePen

     
    I'd also recommend using a function to create everything since the dials are the same. Then just feed in the desired count and you'll be good to go. Hopefully this all makes sense. Happy tweening.

     
  3. PointC
    PointC's post in Problem with onMouseEnter and onMouse was marked as the answer   
    Hi @camiloignaval 
     
    Welcome to the forum.
     
    Looks to me like you'll need to set the overwrite property to true in those tweens. (It's false by default) You could also create a timeline for each element and play/reverse it on enter/leave.
     
    Hopefully that helps. Happy tweening and welcome aboard.

  4. PointC
    PointC's post in How can I draw an SVG from its starting point to its full version? was marked as the answer   
    PS I should also mention, since this is an SVG, you can also use the very handy svgOrigin. So this would work too.
     
        .from("#leafs > *", {       scale: 0,       svgOrigin: "192 192",       duration: 1.4,       ease: "power1.inOut",       stagger: 0.5     }); Happy tweening.

     
  5. PointC
    PointC's post in Circle scaling up to reveal text circle was marked as the answer   
    Here's a ScrollTrigger version.
     
    See the Pen abLjdNm by PointC (@PointC) on CodePen

  6. PointC
    PointC's post in Is it possible to have a stagger start in-progress? was marked as the answer   
    Sure. You could just chain a .time() or .progress() to the end of the timeline. 
     
    gsap.timeline().to("[data-animation='gsap'] .box", {   duration: 2.5,   yoyo: true,   yoyoEase: true,   y: -50,   ease: "power1.inOut",   stagger: {     each: 0.5,     from: "end",     repeat: -1   } }).time(3.5); Happy tweening.

     
  7. PointC
    PointC's post in Create variations for SpintText was marked as the answer   
    Is this what you need?

    See the Pen 3e7b209828c6176a8266a51188759206 by PointC (@PointC) on CodePen
  8. PointC
    PointC's post in Click to show different divs was marked as the answer   
    Hi @TrulyNewbie 
     
    You went back into the archives for that old demo, didn't you? 
     
    I'm not quite sure I follow the desired result, but it seems like you want the parent container to animate autoAlpha and the child h3/h5 to animate their position at the same time? Is that right?
     
    If so, I think I'd make a timeline for each element and set an active variable to pick which timeline to play/reverse. Maybe something like this.
    See the Pen QWqrdxR by PointC (@PointC) on CodePen

     
    Is that what you needed or did I completely misunderstand the question?
     
    Happy tweening.
     
  9. PointC
    PointC's post in ScrollTrigger + Timeline sometime works sometime does'nt was marked as the answer   
    Yeah - I can see the .champ-overlay div isn't animating. If you remove the<html> ,<head> & <body> elements from the HTML panel it will work. Note: they shouldn't be there. Only the HTML from your <body> element needs to be in that panel.
     
    You can also fix it by setting your CSS:
    html, body {   height: 100%; } Happy tweening.
     
  10. PointC
    PointC's post in Draggable does not trigger OnDrag and Snap in React. was marked as the answer   
    You'll need to use a regular function.
     
    onDrag: function() {console.log(this.rotation)} Happy tweening.
  11. PointC
    PointC's post in Simple countdown not working was marked as the answer   
    Hi @LuciusVH 
     
    Welcome to the forum.
     
    When you call a function like that, you need to use onStartParams. You'd have something like this:
    onStart: countdown, onStartParams:[3] Loops and repeats can be quite helpful for something like a countdown. Here's another way to approach it. Maybe it'll give you some ideas.
     

    See the Pen mdBmdMB by PointC (@PointC) on CodePen
     
    Happy tweening and welcome aboard.

     
  12. PointC
    PointC's post in Responsive Logo w. Gsap, SplitText, particles & Svg was marked as the answer   
    Looks good. I'm glad to hear it's working for you now with paths. 
     
    Happy tweening and thank you for being a member of Club GreenSock.

     
  13. PointC
    PointC's post in current value of a tween prop was marked as the answer   
    I think you're looking for the .getProperty() method.
     
    https://greensock.com/docs/v3/GSAP/gsap.getProperty()
     
    Happy tweening.

     
  14. PointC
    PointC's post in Animation timeline only once playable was marked as the answer   
    If I had to guess, I'd say you were looking for one of these:
    timeline1.play(0); timeline1.restart(); If not, a minimal demo would be helpful.
     
    Happy tweening.
     
  15. PointC
    PointC's post in Random variable animation with gsap was marked as the answer   
    I'd probably do something like this:

    See the Pen af1db50f7d61d2ed491b684a885d4308 by PointC (@PointC) on CodePen
     
    Happy tweening

  16. PointC
    PointC's post in How to make this transform using matrix was marked as the answer   
    As @GreenSock mentioned, 3D transforms are not supported on SVG elements like that. You can use a scaleX tween to fake it.
     

    See the Pen 8badce6674e45763d2c640cf5d6fe26b by PointC (@PointC) on CodePen
     
    Happy tweening.

     
  17. PointC
    PointC's post in Clip-Path animation doing nothing, then jumping to end state? was marked as the answer   
    Please try it with the units.
     
    'clip-path': 'inset(0vh 0vw 0vh 0vw round 0px)' Happy tweening.

  18. PointC
    PointC's post in How to use Stagger with forEach Loop? was marked as the answer   
    I'd probably use batch, but you could use the index of the loop to set a small delay too.
     
    revealContainers.forEach((container, i) => {   let image = container.querySelector("img");   let tl = gsap.timeline({     delay: i * 0.3,     scrollTrigger: {       trigger: container,       start: "top 120%",       toggleActions: "play none none reverse",     }   }); ...  
  19. PointC
    PointC's post in Run a Tween on classes but in random order was marked as the answer   
    Please give this a whirl.
     
    gsap.fromTo(   ".box",   { opacity: 0, scale: 1.2 },   {     opacity: 1,     scale: 1,     duration: 0.1,     stagger: {       each: 0.2,       from: "random"     }   } ); Happy tweening.


     
  20. PointC
    PointC's post in Make an Image visible on scroll was marked as the answer   
    Yep, a mask or clip-path would work well. You'd stack the before and after pictures and then reveal the top one with your mask/clip animation. I'd say give it a shot and see how far you can get with the project and then we'll help when you get stuck with any GSAP related problems. A minimal demo would be great too.
     
    Happy tweening.

     
  21. PointC
    PointC's post in DrawSVGPlugin: Animate stroke around SVG path was marked as the answer   
    Hi @Duo 
     
    I think this demo should help.
     
    See the Pen BaKGyaa by PointC (@PointC) on CodePen

     
    Happy tweening.

     
  22. PointC
    PointC's post in rotationX not working was marked as the answer   
    You fake a Y rotation with a scaleX tween and an X rotation with a scaleY tween.

    See the Pen 95493c46a024f24e4d8c26ead210293b by PointC (@PointC) on CodePen
     
    Yes, you can add a div to an SVG. That's called a <foreignObject>.  More info:
    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
     
    Happy tweening.

     
  23. PointC
    PointC's post in rotationX not working was marked as the answer   
    You fake a Y rotation with a scaleX tween and an X rotation with a scaleY tween.

    See the Pen 95493c46a024f24e4d8c26ead210293b by PointC (@PointC) on CodePen
     
    Yes, you can add a div to an SVG. That's called a <foreignObject>.  More info:
    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
     
    Happy tweening.

     
  24. PointC
    PointC's post in rotationX not working was marked as the answer   
    You fake a Y rotation with a scaleX tween and an X rotation with a scaleY tween.

    See the Pen 95493c46a024f24e4d8c26ead210293b by PointC (@PointC) on CodePen
     
    Yes, you can add a div to an SVG. That's called a <foreignObject>.  More info:
    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
     
    Happy tweening.

     
  25. PointC
    PointC's post in rotationX not working was marked as the answer   
    You fake a Y rotation with a scaleX tween and an X rotation with a scaleY tween.

    See the Pen 95493c46a024f24e4d8c26ead210293b by PointC (@PointC) on CodePen
     
    Yes, you can add a div to an SVG. That's called a <foreignObject>.  More info:
    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
     
    Happy tweening.

     
×
Login Create Account