Jump to content
Search Community

Andy777

Members

  • Posts

    38

  • Joined

  • Last visited

 Content Type 

Everything posted by Andy777

1
2
Page 2 of 2  
  1. Andy777
    Thanks @Rodrigo for the explanation. Now i understand it much better.
  2. Andy777
    Hi @GreenSock, What does yPercent:o yPercent:100, the symbol "<" and the attribute immediateRender : false? Could you explain to me?
  3. Andy777
    I found the solution @Rodrigo using the stagger object with repeat: -1 to avoid waiting all chars finish animation.
  4. Andy777
    Hi, How can i scale to 1 each words when it reach scale 2 instead of waiting the scaling of all words to be scaled to 2 then to 1? Thanks in advance!
  5. Andy777
    it does @GreenSock, thanks for your help!! What does it means the comment on the file js?
  6. Andy777
    I don't know how to explain what animation i want to do but if you try to view the animation on your browser, you can understand. I post here the code without use codepen because in codepen displays different. <style> body{ background-color:black; } .box{ background-color: black; width:500px; height:400px; position: absolute; } .borderLeft{ border: 1px solid red; position: absolute; left: 0; height: 99.5%; } .borderRight{ border:1px solid red; position: absolute; right: 0; height: 0%; } .borderTop{ border:1px solid red; position: absolute; top: 0; width: 0%; } .borderBottom{ border:1px solid red; position: absolute; bottom: 0; width: 0%; right:0; } </style> <div class="box"> <div class="border borderLeft"></div> <div class="border borderRight"></div> <div class="border borderTop"></div> <div class="border borderBottom"></div> </div> <script type="text/javascript"> gsap.to(".borderLeft", {height: "0%", duration: 1}) gsap.to(".borderTop", { width: "100%", duration: 1, onComplete() { $(".borderTop").css("right", "0"); gsap.to(".borderTop", {width: "0%", duration: 1}) gsap.to(".borderRight", {height: "99.5%", duration: 1, onComplete(){ $(".borderRight").css("bottom", "0"); gsap.to(".borderRight", {height: "0%", duration: 1}) gsap.to(".borderBottom", {width: "99.5%", duration: 1, onComplete() { $(".borderBottom").css("left","0"); gsap.to(".borderBottom", {width: "0%", duration: 1}) }}) }}) }}) </script> I would like that this animation repeats in loop. Sorry for not give to you a minimal demo.
  7. Andy777
    What does it means the fourth options in toggleActions @Rodrigo? I mean each part at what is related?
  8. Andy777
    I mean exactly this, thanks!!
  9. Andy777
    No @Rodrigo, i think that the solution is in toggleActions. When user scroll and enter in the markers of the div (from top to bottom or from bottom to top of the page) the animation of the property opacity starts. Sorry my english.
  10. Andy777
    Hi. I don't know how to repeat the animation of the blank div when the element is in the viewport between start/end markers.
  11. Andy777

    MorphSvg mistakes

    Andy777 replied to Andy777's topic in GSAP

    Here is the minimal demo @GSAP Helper https://codepen.io/Andy199807/pen/dyeZyZg it display the t-shirt inverted, it translate and then it disappear. How i solve this issues?
  12. Andy777

    MorphSvg mistakes

    Andy777 posted a topic in GSAP

    Hi! I am trying to create a simple svg morph that morphs a circle path to a t-shirt path but after the transformation the t-shirt disappear. Here is the code: <!DOCTYPE html> <html> <head> <style> #hippo { visibility: hidden; } </style> </head> <body> <svg id="eD8cQxzftYp1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 2000" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> <g transform="matrix(.1 0 0-.1 0 2000)"> <path id="hippo" d="M10810,16308c-170-13-1343-16-1671-4l-246,9-54-25c-30-14-94-58-144-99-149-120-243-176-363-216-236-78-950-359-1372-540-519-223-716-349-1002-640-95-97-113-120-152-204-68-145-258-619-563-1404-36-93-152-388-258-655s-206-523-223-570c-16-47-55-146-85-220-91-227-157-406-157-428c0-14,13-30,38-45c38-25,733-325,1022-442c229-93,529-221,761-325c107-49,204-90,214-92c15-2,29,14,62,72c24,41,48,77,53,78c7,3,10-786,11-2330c2-3556,5-4146,20-4165c18-20,46-30,127-44c95-16,6315-14,6379,3c33,8,47,18,55,37c7,16,14,170,19,401c16,808,30,3690,24,4858-4,718-3,1222,3,1222c5,0,26-29,47-65s41-68,45-70c8-5,259,96,627,254c155,66,333,141,395,167c387,159,1021,443,1046,468c13,13,11,25-20,98-46,106-86,208-197,498-318,829-856,2197-986,2505-112,267-122,283-258,420-216,216-379,331-691,484-321,158-1216,522-1639,667-70,24-142,51-160,60-71,37-186,121-252,184-38,37-86,75-105,85-44,23-160,27-350,13Z"/> </g> <path id="circle" class="st1" d="M490.1,280.649c0,44.459-36.041,80.5-80.5,80.5s-80.5-36.041-80.5-80.5s36.041-80.5,80.5-80.5 S490.1,236.19,490.1,280.649z"/> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="src/MorphSVGPlugin.min.js"></script> <script type="text/javascript"> gsap.to("#circle", {morphSVG:"#hippo"}) </script> </body> </html> What i am doing wrong and what is miss in the code?
  13. Andy777
    Hello, I would like to know how can i detect when a element is in the viewport on user scroll the window and then move a div to x : 50. Thanks in advance.
1
2
Page 2 of 2  
×
×
  • Create New...