Jump to content
Search Community


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,949 profile views
  • P2H

pati's Achievements



  1. pati

    Add acction to a video

    I have created this: https://codepen.io/sonder15478/pen/GWdzgm which is more less what I need. The only thing that I can't do is to show the link just for a few seconds. At the moment, it's showing it during the whole video... Do you know how to solve this? I am very close!
  2. Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
  3. The size of the waves should be as this example: http://codepen.io/sonder15478/pen/NparbM Yes, the waves move at the same speed and they are stationary. Thank you very much for your help!!
  4. OSUblake, I'm using an image of a city and I am animating some elements of that image like sea, clouds, etc. So, what I would like to do is to add that animated waves to the sea to give it the sensation that it's moving. For it, I was trying to apply the code that you gave me, but I'm afraid it's very advance to me. What I would like to do is to have two animated waves (like the first image attached), but like 5 times over the sea (second image attached).
  5. That's great!! Thank you very much! I was also trying to apply the code that you just gave me to another animation that I have. It's the same idea, but it isn't working either... This is how it works at the moment: http://codepen.io/sonder15478/pen/NparbM And this is applying your code: http://codepen.io/sonder15478/pen/dvVXpM but it doesn't work... Also, this might sound stupid, but in the first example, the waves are not on the top of the svg, they have like a margin top and I don't know how to disable that. Do you know to "remove" that margin? Thank you!
  6. I am having some troubles with the document.querySelectorAll() because, I don't know why, it doesn't work when I add more than one class or ID. So, this is what I want to achieve: http://codepen.io/sonder15478/pen/PpJqKN But there's a lot of code that I wouldn't need if I use document.querySelectorAll(). This is where I get stuck: http://codepen.io/sonder15478/pen/xqXGXm I also tried with getElementsByClassName(), but it didn't work either... Any ideas? Thank you!
  7. pati

    Animated waves effect

    You just saved my day PointC! Thank you very much!!
  8. pati

    Animated waves effect

    Hi PointC, I'm actually working with the first code that you suggested me and I am very close to get what I need. There's only one thing left that I am not able to do... Do you know hoy can I modify this wave: http://codepen.io/osublake/pen/7c235b8b3c2d9bb6cecea6acfff7ff37/ to look much smaller? The width and height? I would like to look like the image attached... Sorry I'm just learning JS Thank you for your help
  9. Hi, I've created this animation: http://codepen.io/anon/pen/VerMWX, but when I paste it to my code, it doesn't work... do you know if I need to add a link to a Greensock file or something like this. The only link that I have on my header at the moment is: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
  10. pati

    Animated waves effect

    Hi PointC, Yes, I've read that article before but I don't know how to apply it to my code... I am just starting with Greensock. This is what I have at the moment (JS is the one that you just told me): http://codepen.io/sonder15478/pen/jBwGWY Thank you
  11. You're right Jonathan. That's because on my file I had images instead of forms and when I pasted my code to codepen, I forgot to delete the width and height. Also, do you know how can I fix this? https://greensock.com/forums/topic/16143-animated-waves-effect/
  12. That's exactly what I was looking for! Thank you very much for your help Shaun Gorneau
  13. Hi, I would like to animate two lines as they move as waves. I want something like this, but with the two lines and moving slowly, like the sea. http://codepen.io/winkerVSbecks/pen/EVJGVj Does anyone know how to do this? Thank you
  14. Thank you for your quick answer. I'm afraid is my first time using Greensock so I don't know how to do that. So if I have a parent div with a 500px width and I want to move an element 20% of the parent width, how can I do that?
  15. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  • Create New...