Jump to content
GreenSock

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

Scale video is very buggy

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi , 

 

I have a application where i need to zooming the video at some point of time , but the video zoom is buggy at sometimes , can you provide me any solution, it is not very smooth . I have attached some sample code with the codepen , Don't ask about lot of Div's , because i had removed lot of DOM's for easy understanding.

 

In the example ,  I have zoomed in the video for scale 5 and zoomed out to scale 1. You can see that there is some hanging here and there , Please help. 

See the Pen OOvGWM by jeffin417 (@jeffin417) on CodePen

Link to comment
Share on other sites

Hi @OSUblake. No i have tried it with different videos and still experiencing the same issue :( Also I have three videos to be merged in a single video and animate it , at that time there is a huge slowdown of videos , please wait , i will provide another codepen

Link to comment
Share on other sites

Hello @anotheruser and Welcome to the GreenSock Forum!

 

I would second @OSUblake. This looks like either the video is not loading due to your video. Or most likely your not waiting until the video has loaded fully before animating it.

 

But this is not happening due to GSAP, but because your telling GSAP to animate an active element while its downloading video data. Which means its gonna be jank and buggy scale city. So you might want to make sure you using the HTML5 preload attribute for the video element, and or look into doing other things to make sure your video is fully loaded before you animate it.

 

And also make sure your only animating stuff when the DOM is ready (DOMContentLoaded) and the window is fully loaded (addEventListener("load")), also meaning that the video is fully loaded. Otherwise you will see that delay and hesitation before it tries to animate an active media asset.

 

:)

  • Like 2
Link to comment
Share on other sites

Hi @Jonathan.

 

Thank you very much for the reply , I have tried what you have said , I have added preload to the video and I have started tweening after the window load , please check the codepen 

See the Pen WXJrjR by jeffin417 (@jeffin417) on CodePen

 

 

Is there anything I am missing ? because it still hangs when zooming out,(( check the horizontal slanted lines between videos))

Link to comment
Share on other sites

Hi @anotheruser

 

I'm a little confused on what your animation should do or animate like. You should first comment out your <video> elements and first animate it's parent #cameraItems first. So you make sure your animating it the way you want so we are all on the same page. ;)

 

Then once you have #cameraItems animating correctly, then you can worry about animating the video element. You know what im saying. Animate in parts so you can rule out anything that is causing a conflict. Because even when i take out your video element i see no animation playing. You can see how i modified your codepen so there is no video element. And removed the add() method since that is only needed for when adding tweens or timelines to a master timeline.

 

See this forked codepen without the video .. is this what the animation is supposed to do

 

See the Pen rYvePa by jonathan (@jonathan) on CodePen

 

So like i said above its better to first get the main animation working before introducing video and any other assets to make sure your first animating the way you want. You know what i mean?

 

:)

Link to comment
Share on other sites

2 minutes ago, Jonathan said:

I'm a little confused on what your animation should do or animate like. You should first comment out your <video> elements and first animate it's parent #cameraItems first. So you make sure your animating it the way you want so we are all on the same page. ;)

 

Yes , You got it , Thats what i want to do , but with the video.

 

3 minutes ago, Jonathan said:

So like i said above its better to first get the main animation working before introducing video and any other assets to make sure your first animating the way you want. You know what i mean?

 

I got that working , actually I animated the cameraitems before adding the video to test whether scalein and scaleout works smoothly , it worked , but when i add videos to it , it started being buggy , The codepen you have shown is the animation effect i am trying to reproduce , but with video in it , I need the whole div to be zoomed in and zoomed out

Link to comment
Share on other sites

@anotheruser I think your next step using my forked codepen is to get your video to be masked or clipped.

 

Since i presume that you want the elements to slide open and then you see the video like a revealing curtain, right?

Link to comment
Share on other sites

 

 

No . I am just using same video for three of the masks. Normally it will be 3 different videos , But the animation effect will be zoom in and zoom out . (scale to 5 and then sclae back to 1) just like in the following codepen. Meantime , thank you so much for your effort on helping me , it means a lot.

 

See the Pen OOZXOq?editors=1111 by jeffin417 (@jeffin417) on CodePen

 

Link to comment
Share on other sites

12 minutes ago, Jonathan said:

Since i presume that you want the elements to slide open and then you see the video like a revealing curtain, right?

Not a curtain effect , just zoomin the cameraitems div and zoom out

 

var videoDiv = document.getElementById("cameraItems");

//zoom in
t1.add(TweenMax.to(videoDiv, 4, { scaleX: 3, scaleY: 3, ease: Linear.easeNone }),3);

//zoom out
t1.add(TweenMax.to(videoDiv, 2, { scaleX: 1, scaleY: 1, ease: Linear.easeNone }),7);

 

Link to comment
Share on other sites

Hi @anotheruser

 

Whats happening looks more like a CSS layout issue, than GSAP related. The reason being is that you have multiple .videoTag elements set to position: absolute, which is fine. But that means that either your .imgClass or #cameraItems element MUST have position: relative on them. So your .videoTag elements can be absolutely positioned relative to their parent #cameraItems. This ensures cross browser layout. Plus you will need to add z-index to your .videoTag elements, so you tell the browser which elements are stacked which way so the videos don't cover your animated elements right away or at all.

 

I think that is why i'm confused cuz the way you have it now, the video immediately covers your elements being animated. Is the video supposed to fade in, or scale up. I think that is why i'm still confused on the effect your going after.

  • Like 1
Link to comment
Share on other sites

 

On 11/22/2017 at 9:59 PM, Jonathan said:

I think that is why i'm confused cuz the way you have it now, the video immediately covers your elements being animated

Am not Animating the elements. There are no elements , I have a div, where i will add three videos 

<div class="imgclass">
  
	<!-- FIRST VIDEO -->
	<div class="videoTag" style="clip-path: url(" #svgTextPath0 ")>
		<video preload="auto " class="videoElement " src="http://techslides.com/demos/sample-videos/small.mp4"></video>
	</div>	

	<!-- SECOND VIDEO -->
	<div class="videoTag " style="clip-path: url( "#svgTextPath1"); background-color: rgb(135, 113, 150); ">
		<video preload="auto " class="videoElement " src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video>
	</div>

	<!-- THIRD VIDEO -->
	<div class="videoTag " style="clip-path: url( "#svgTextPath2"); background-color: rgb(201, 16, 173); ">
		<video preload="auto " class="videoElement " src="http://techslides.com/demos/sample-videos/small.mp4"></video>
	</div>  

</div>

 

In the example above you can see that I have a div where i will add three videos like Splitscreen videos just like below. 

 

 

So now i have a div with three videos in it. Right?

Now all i got to do is zoomin (scale to 5) the parentdiv (imgclass).  So after zooming in( zoom the div , so the videos have to zoom too) and it will have to look something like the image which i have attached below.

 

 

 

I think now you got what i mean , sorry for delayed response. Now i have acheived what i said , but when i am zooming in the animation is buggy. 

 

Also i have tried what you have said before (setting parent position to relative and child video compoentns position to absolute) and am still experiencing the issue.

Am animating the parent div alone , not the video tags , I just need a smooth zoomin effect

See the Pen OOZXOq by jeffin417 (@jeffin417) on CodePen

 

Link to comment
Share on other sites

I don't think issue is with zooming. Your video is 24 FPS, I doubt that will give you smooth effect. I replaced it with a 60FPS video from youtube and it looks smooth to me.

 

WARNING: demo will auto play 3 videos from youtube.

 

See the Pen aVGrRz by Sahil89 (@Sahil89) on CodePen

 

Link to comment
Share on other sites

@Sahil The above codepen still hangs for me , Hangs big time , is it working perfectly for you ? because the zooming effect was very buggy , wait i will try to record it and send you if possible

Link to comment
Share on other sites

Yup it works smoothly for me, unless any video takes time to load. While your videos when I tried, they zoom well if they have loaded already, but while zooming out they seem to stutter a bit. If I am guessing correctly, zooming gets messed up when there are network requests. Others will have to confirm it, but zooming out will need better FPS for sure.

 

I tried to change the event to 'canplaythrough' but it is still hit or miss. This article might help you.

 

Just curious, why don't you create entire video in something like blender/after effects etc as you want and use it on site?

 

See the Pen ooyvOz by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×