Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Posts posted by pati

  1. 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: 

    See the Pen Ppeyry by sonder15478 (@sonder15478) on CodePen


    Any ideas of how to do it?

  2. 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).



  3. 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: 

    See the Pen NparbM by sonder15478 (@sonder15478) on CodePen


    And this is applying your code: 

    See the Pen dvVXpM by sonder15478 (@sonder15478) on CodePen

    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!

  4. 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: 


    But there's a lot of code that I wouldn't need if I use document.querySelectorAll().


    This is where I get stuck:

    See the Pen xqXGXm by sonder15478 (@sonder15478) on CodePen


    I also tried with getElementsByClassName(), but it didn't work either...

    Any ideas? 
    Thank you!

    See the Pen PpJqKN by sonder15478 (@sonder15478) on CodePen

  5. Hi sonder  :)


    We've had a similar discussion and Blake had a terrific answer here:




    I think that should help you.


    Happy tweening.



    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: 

    See the Pen 7c235b8b3c2d9bb6cecea6acfff7ff37 by osublake (@osublake) on CodePen

    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


  6. 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  });

    See the Pen JWJbzG by sonder15478 (@sonder15478) on CodePen

    • Like 1