Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

Charlyta's Achievements

  1. Hi Cassie! This SVG is positionated on the top of a div to be transformed from a line to a curve while scrolling. You could see an example here of what I mean: https://codepen.io/armantaherian/pen/ZyZWVZ Sorry if I explain it not clearly
  2. Hi! I want to update the path pf a SVG while scrolling. I supose that I have to use 'PositionInViewport'. I have seen an oficial GSAP example form Codepen explaining 'PositionInViewport' and 'isInViewport' here: https://codepen.io/GreenSock/pen/WNOzrqg My Codepen trying to perform this is: https://codepen.io/charlyta/pen/mdxLZPg I tried to update the value of data path in this way: gsap.to(curve.setAttribute( "d", "M 800 300 Q 400 " + myposition + " 0 300 L 0 0 L 800 0 L 800 300 Z") ); Where 'myposition' is from: let myposition = ScrollTrigger.positionInViewport(box, "center").toFixed(2); The question is: How to get the position to pass this var to the path. Thanks in advance positionInViewport: Scroll down
  3. Thanks a lot, Dipscom!! and sorry...
  4. Hi Dipscom! Yes! You are right! I want the scrolling to be smooth. Now I am using Gsap and TweenMax in my example. There is the same error and blank space
  5. Thanks Dipscom! I only want to achieve a simple scroll using grid.. this is my ultra simple example in codepen. As you could see there is ever a blank space below the div.. (see the new codepen above) Thanks!!
  6. Thanks for your fast response Dipscom! I have simplify the code and I can see that this problem appears using locomotive too, so I supose there is something wrong abot the css using grid. Thanks
  7. I know that problably is a repeated question but I don´t understand why appears a great blank space bellow a div when scrolling. Is it more of a styling issue? Any help would be appreciated. Thanks in advance.
  8. Thanks for your response, it has been very useful. I have notice that my first code works fine with previous resize of the screen. I will use your code to test where is the problem. ;)
  9. Hi OSUblake, I want to show my hidden div with display:none and opacity:0 becomes visible. This hidden div will be showed from an option link of my main menu. I have set the right code in jquery, but the div is not displayed. It is because there is an error in my gsap code? This an example of what I mean: https://codepen.io/GreenSock/pen/QWWaWPy Thanks
  10. Hello and thanks in advance. I am trying to show a hidden div that scrolls from my main menu. It is not working even I changes the opacity, display or visibility options. Any suggestion will be really apreciated.
  11. I must to refresh my knowledge so! 🧐 Thanks for the appointment
  12. Hi @OSUblake Yes! Thanks by your lesson! I think this line have to be mentioned in Gsap tutorials or documentation: gsap.to(`.article[data-number="${number}"]`, Thanks for your really apreciate help!
  13. Thanks Cassie for your fast response and for the demo. I have modificated my first example to show what I need. Thanks!!
  14. Hello. It´s my first animation using Gsap trying to understand and recreate in my own way an example that appears on tympanus. I would like to know what is the better way to show a div based in data attribute. In my example always shows the same div but the data is different. Any help will be really appreciate.