[Add acction to a video]

I have created this: 

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

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!

[Add acction to a video]

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?

[document.querySelectorAll() not working]

The size of the waves should be as this example: 

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

Yes, the waves move at the same speed and they are stationary.

Thank you very much for your help!!

[document.querySelectorAll() not working]

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

[document.querySelectorAll() not working]

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!

[document.querySelectorAll() not working]

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

[Animated waves effect]

You just saved my day PointC! Thank you very much!!

[Animated waves effect]

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

[Animation doesn't work on file, but it does work on Codepen. Why?]

Hi,

I've created this animation: , 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>

See the Pen VerMWX by anon (@anon) on CodePen

[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):

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

 

Thank you

[Percentage animation based on parent width]

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/

[Percentage animation based on parent width]

That's exactly what I was looking for! Thank you very much for your help Shaun Gorneau

[Animated waves effect]

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.

 

See the Pen EVJGVj by winkerVSbecks (@winkerVSbecks) on CodePen

 

Does anyone know how to do this?

Thank you

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

[Percentage animation based on parent width]

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? 

[Percentage animation based on parent width]

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