Search the Community

Hello, I'm trying to make an animation using a SVG file as framework of a embed video. I don't know how to make rect and paths to animate, I've tried everything. The animation should be from the center of the top line to the left and right and while advancing paint the path and ends in the central part of the bottom line. The final animation is not important, for now, but the svg does not move at all in codepen.

Hi, I am trying to create a banner with timeline animation and a background html5 video. I am trying to keep the video in sync with the timeline, which is also working pretty well in the codepen example. That being unless you switch to another tab or scroll down on a page so the banner is out of sight, then it seems the animation is pause while the video continues to play and therefore gets out of sync. So what is the best practice here? to always keep them in sync? Can I listen for when the timeline is in pause mode and then pause the video, or can the timeline pauses be deactivated?... or a 3rd option Perhaps someone has an example on this or maybe an earlier topic which I couldn't find?! Thanks! /Alex

Hello everyone, I am new to GSAP and I am trying to enable dragging and click on custom html5 video timeline with GSAP. I have read a couple of posts (like this one) on the forum but there is something I can't understand... I've reproduced a simplified example on the following jsfiddle (I hope you don't mind jsfiddle) : https://jsfiddle.net/epigeyre/oLmk6b0d/ So I create my draggable element from an element stored in a variable, bound it to it's container (which is the timeline container), and then add my function onDrag (I guess click will be the same). The timeline progress is shown by a div inside the timeline container that is scaling on an X axis from 0 to 1. I think linking to the current video time is ok but the animation is not (I don't understand why a translate is applied...). Here is that specific snippet: Draggable.create( timelineProgress, { type:'x', bounds: timeline, // My timeline container onDrag: function() { video.currentTime = this.x / this.maxX * video.duration; TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ; }, onClick: function() { console.log('click'); } }); Could you help me understand what's going? Thanks a lot for your help!

Hello, I can't seem to animate a div that contains a youtube video and I have a project that due asap. I want to be able to animate the opacity or the position. The animation either won't occur or the animation will stop before it has completed. Please let me know what I might be doing wrong. Thanks! ::Carey::

I'm trying to create a morphing icon to overlay a video. It's partially working, the first time the video is paused it works as intended but pressing it again show the icon in its final state without the animation. The second animation to go from pause to play never triggers. Any guidance as to what I'm doing wrong is greatly appreciated.

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?

Hi guys, I´m a fan of mini videos and would like to control a video by tweening - especially the reverse part. I saw the post https://greensock.com/forums/topic/9838-reverse-video-with-pauses/ but the video runs not smooth. Here is my pen: http://codepen.io/mikeK/pen/Zexqgp Kind regards Manfred

This isn't so much a question as it is a warning. If I had hair I would've pulled it all out by now. I was working on a way to use TimelineMax to trigger separate videos to play in sequence as well as follow a scrub bar. Needed to start and/or stop video clips at any point in the video and then trigger the next one to simulate someone doing a video edit - where they might drag in the edges only exposing certain parts of the video's timeline. So, I just set up a simple array of objects with properties that I could store and retrieve at any point like this: vidArr = [ vid1 = {el: document.getElementById('vid1'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false}, vid2 = {el: document.getElementById('vid2'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false}, vid3 = {el: document.getElementById('vid3'), duration: null, startAt: null, endAt: null, delay: null, active: false, loaded: false} ]; If you look closely you'll see I named one of the properties delay which was as dumb as it gets. Rather than doing much in the way of tweening, I'm just using TimelineMax to trigger opacity, start and end times on the video objects. There is a quick opacity tween at one point but mainly just to keep the first video from flashing on replay. Here's what it looked like: for( let vid of vidArr ) { var tl = new TimelineMax({onStart:startVideo, onStartParams:[vid.el]}); tl.set(vid.el, {currentTime:vid.startAt, immediateRender:false}, 0) .set(vid, {active:true, delay:masterTL.duration(), immediateRender:false}, 0) .to(vid.el, 0.2, {opacity:1, immediateRender:false}, 0) .set(vid.el, {opacity:0, immediateRender:false}, vid.endAt) .set(vid, {active:false, immediateRender:false}, vid.endAt); vid.delay = masterTL.duration(); masterTL.add(tl,vid.delay); } There are 3 videos and each one is 10 seconds or under. The first 2 added up to 17.2 seconds. Everything was good until it got to the last time through the loop and right after this... .set(vid, {active:true, delay:masterTL.duration(), immediateRender:false}, 0) ...where it was ending up being like 34 seconds long instead of 22 or so. Even though I was telling it to set a value on the delay property for vid it was setting it as a delay property for the timeline itself. Sometimes I surprise myself at how long I can stare at something and not see it. Anyway, don't use reserved properties for your custom objects! I renamed the property to wait and all started working. I do have one quick question though. Should it be necessary for me to add immediateRender: false in all those places? I tried to figure out a way to set that once in that glob of set's and to's but it would always break. Anyway, if anyone is looking for a way to accomplish this, it's working in the codepen.

Hi, I'm in the process of creating an 300x250 MPU to be uploaded to DoubleClick Studio and ideally want the video in this creative to autoplay on both desktop browsers as well as mobile browsers. So far the MPU only autoplays on desktop browsers and requires user interaction to start playing on mobile browsers. I've read several forums that state that videos are unable to autoplay on mobile browsers for various reasons; so my question is, has anyone had a similar problem and been able to find a workable solution? Many thanks,

Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?

Hi guys! Your community is awesome! I often read this forum but now I can not find an answer to my question. I need to make a responsive banner that stretches vertically and horizontally within certain limits (320x268 -> 1080x328). Inside this responsive container must play video. Advertising requirements are as follows: <script> function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> <a id="click1_area" href="#" target="_blank">...</a> <a id="click2_area" href="#" target="_blank">...</a> <a id="click3_area" href="#" target="_blank">...</a> // After "<a href ...></a>" assign them to click handlers: <script> document.getElementById("click1_area").href = getUrlParam('link1'); document.getElementById("click2_area").href = getUrlParam('link2'); document.getElementById("click3_area").href = getUrlParam('link3'); </script> For Video: Thank you guys for any help!

I've have red almost everything on the net and over here about animation video, but can not get anything working... How do I let say on $(window).on('click', function(){ // play.forward.... }); and dblclick, playinReverse... I've tried so many things... these did not help. http://greensock.com/forums/topic/12771-animating-the-playhead-of-video-element-is-it-possible/?hl=ahrengot#entry53668 http://greensock.com/forums/topic/13719-tweening-video-frames/?hl=video+control

Hi. Maybe a simple question. But how do I start and stop a HTML5 video from a button in an HTML5 ad? I have looket in the forum but found nothing so simple Regards Olle

Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble

Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble

Recently, we have moved our bespoke animations away from using DOM elements to using Canvas, due to memory issues when running on low to medium powered devices such as Chinese Android "sticks" and Google ChromeBit. Everything went smoothly, until we introduced videos. We have found a bug where a video plays on the first load of the page, but then after subsequent refreshes, the video will not play. Instead it just shows the very first frame. What is peculiar is that the video is loaded into its DOM element (used by Canvas to grab the video) and the frame even shows on the Canvas itself, but viewing the network logs in Chrome Inspector, the video is not shown in the logs as being loaded. Image assets are shown, as are the JS files, but no video, despite it being on the page. After some very brief digging, there does seem to be some kind of timing issue in the code. Assets are added to "sub" timelines which in turn are added to a main timeline. It appears that the sub timelines are firing their onStart callback before the code has chance the load the videos into the DOM element (looking at the code with my colleague, the order looks correct) Is there any reason why a (sub) timeline would start prematurely, before the main timeline is told to play?

Hello, I am about to start doing a landing page with a 10 second video. But the thing is, they wanna add 3d elements to the video so i have to do it with stepped ease or something and make it move by mouse scroll. On the video, a guy jumps off the cliff with a snowy enviroment and when his fall ends he drops in to a cave and landing page itself fadein/scale up. So, I have few ideas but i wonder, how would you make this ? Simply: How to play video frames by mouse scroll with highest performance & quality ? Just wanna see how would you do, thanks.

Hi, I'm trying to sync a Timeline with a video, but the only reliable solution seems to be ontimeupdate, which only fires every half second or so Is there decent solution to this? Thanks

I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky. I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse.. This is all happening within a much larger framework, so i'm just copying in the relevant snippet here; self.addScrollListener = function() { $(window).bind('scroll',self.updateTimelineByScrollPosition); } self.current_percent = 0; self.updateTimelineByScrollPosition = function() { var current = $(window).scrollTop(); var max = $(document).height() - $(window).height(); var pos = ( current / max ) * 100; var seek_time = self.time * pos; TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead }); } self.tweenUpdatePlayhead = function() { self.jplayer_div.jPlayer( "playHead", self.current_percent ); }; Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element. Thanks, Andy

Hello, I am looking for an example to animate something as this https://drive.google.com/open?id=0Bzx7LDFcZwmMYnhabVY0ZjRwc2M ​ I would like to have the 2 parts of the image open and let appear a video which has started when the 'doors' have oppened by 50%. My question is that the 2 images should not only open but also disappear, as if they enter behind the display. With which API could I obtain this effect ? Thanks for help CS

Hey guys, I have a pretty interesting challenge. I need to animate the "playhead" of a <video> element. Ie the video.currentTime property. Running currentTime through TweenMax like so doesn't work as setting currentTime takes a little while to update, so it simply jumps to it's destination. I suspect what I want to do can't be done using the native <video> element, but I have to use an image sequence and <canvas> instead, but I wanted to check with you bright fellas before venturing down that path

Hello, I'm trying to loop a video and the video loops, but not at the end of the video, it's cut at approx 50% of the video. The video is 4 seconds long and at the half it just jumps to the end and starts the loop again. Any idea in how to prevent that? I'm loading the video with this line: var lVideoPlayer:VideoLoader = new VideoLoader("assets/myVideo.flv", {name:myVideo.flv,container:videosParents[_videoNdx], autoPlay:false, requireWithRoot:this.root, deblocking:1, repeat:(_videoNdx==1?-1:1),onComplete:_onConnect }); I would need perfect seamless loop, but hopping that way is hard. At the same time, the video triggers 2 events, right now I'm tracking that events using VideoLoader.PLAY_PROGRESS but perhaps it would be more efficient using cues? Well, thank you in advance, Toni

Just wondering if there is a way to add and play/pause/stop media elements like audio and video to an instance of TimelineLite or TimelineMax and control with the GSAP-JS API? What I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Anyone any clues?

Hello guys, I am not sure if I am asking in the right place. I wanted to know if GreenSock is the right plugin to do what apple is doing like the attached reference. http://www.apple.com/ipad-air/ I am able to play forward with pauses but not in reverse with pauses. However, if I am right at the end of the video I can play in reverse all the way. We tried this using a .mov with h264 compression. Is it because it is a streaming format? How is apple doing this? Thanks all.

Hi, I am building a page that builds multiple 'scenes' horizontally in the content area. Only one scene is visible in the area at a time. Users can drag the scene container to get to other scenes. I've done this using Draggable. For the most part, it has worked great. However, some scenes have a large video in them. When running on the iPad (chrome and safari), if the user touches the video and attempts to drag the container in order to move to the next scene, it does not drag. I've tried adding data-clickable="false" to the video tag but it still doesn't work. This all works on the desktop as far as I've tested it. Here is a code pen sample of what I'm talking about. You can drag the grey container box, but if you try to drag over the video, the container won't move. http://codepen.io/anon/pen/yohqG I'm using iOS 7.1, but the same thing happens in an older version as well.