Jump to content
GreenSock

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

pati

Members
  • Posts

    15
  • 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).

    post-51501-0-95551500-1489596984.jpg

    post-51501-0-67133600-1489597233_thumb.jpg

  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:

     

    https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401

     

    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

    post-51501-0-06337700-1489426111_thumb.jpg

  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
×