Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Andy777

  1. Really thanks you @mvaneijgen for your suggestions, but i need after the completed of the animation of the tx timelime and tl timeline, in my previous codepen, when it completed each timelines and then the section is scale to 1 i would like that the section on scroll down the section scales down and when scrolling up the section scale up. Could you help me?
  2. Hi there, How i scale down the section element on scrolling down and how i scale up on scrolling up? Please help me letting me know what i miss in the code?
  3. 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
  4. 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.
  5. 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?
  6. Thanks @Rodrigo for the explanation. Now i understand it much better.
  7. Hi @GreenSock, What does yPercent:o yPercent:100, the symbol "<" and the attribute immediateRender : false? Could you explain to me?
  8. I found the solution @Rodrigo using the stagger object with repeat: -1 to avoid waiting all chars finish animation.
  9. 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!
  10. it does @GreenSock, thanks for your help!! What does it means the comment on the file js?
  11. 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.
  12. What does it means the fourth options in toggleActions @Rodrigo? I mean each part at what is related?
  13. I mean exactly this, thanks!!
  14. 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.
  15. 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.
  16. 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?
  17. 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?
  18. 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.