Jump to content


  • Posts

  • Joined

  • Last visited

About Andy777

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Andy777's Achievements

  1. It add the div but is not visible because miss the proprieties css. So how i add them and make the slider work even with the new div? Here is the minimal demo: https://codepen.io/Andy199807/pen/WNyGqZo
  2. Hi @Cassie , sorry i was not specific, the divs that you added must be added once a user click on button "Add div to wrapper", once you add the new div you will see what the problem is.
  3. Hello, if i add another div to the slider the same doesn't work, so how can i add more divs and make the slider work properly?
  4. Thanks @Rodrigo for the explanation. Now i understand it much better.
  5. Hi @GreenSock, What does yPercent:o yPercent:100, the symbol "<" and the attribute immediateRender : false? Could you explain to me?
  6. I found the solution @Rodrigo using the stagger object with repeat: -1 to avoid waiting all chars finish animation.
  7. 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!
  8. it does @GreenSock, thanks for your help!! What does it means the comment on the file js?
  9. 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.
  10. What does it means the fourth options in toggleActions @Rodrigo? I mean each part at what is related?
  11. I mean exactly this, thanks!!
  12. 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.
  13. 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.
  14. Andy777

    MorphSvg mistakes

    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?
  15. Andy777

    MorphSvg mistakes

    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?