Search the Community
Showing results for tags 'sequence'.
-
Hi GSAP community. 2 image sequences 2 canvas' Text appears in the middle/between the 2 sequences Each image sequence renders to their respective canvas. I would like some help setting things up so that the 2 sequences become 1 longer sequence rendering to 1 canvas. But I need the ability to pause or hold this longer single sequence at a particular frame number, so I can animate (text for example), at specific points in the sequence. Please note, if this is achievable I will scale things up to a much larger sequence which will require very specific control to be able to hold/pause (for a declared period of time) at multiple points in the timeline at specific frame numbers etc. To help things along I have a folder at the same location as the other folders called "000" so replace the first sequence's location "001" with "000". - There are 51 images in the "000" folder and the first pause point would be at frame "26" if we are to replicate my codpen example. Thanks guys. ?
- 9 replies
-
- scrolltriger
- sequence animation
-
(and 1 more)
Tagged with:
-
Hello fellow "gsapers", I'm looking for some guidance on how to achieve the effect i want. The main effect i want its like this codepen i linked. I have an dinamic array of section that will be pinned just like that codepen, but then each one of those sections will have an image sequence. When the image sequence of one section ends then it should transition to the next section, and then start the corresponding image sequence (all this controlled by user scrolling). I got the sections transition working just like the codepen, but i dont know how to approuch to make the transition wait until the section image sequence end and then do the section change. I would be very thankfull if someone could point me in the right direction. I'm a bit lost, and still new to gsap.
-
Hi everyone, I'm trying to create an image sequence that can be played backwards or forwards by scrolling the page up and down. But I also need the sequence to be controllable using a video style progress bar. Using some of the code that I've copied from these forums I've managed to get the image sequence working and I've also managed to create a play bar control with a playhead that can be dragged left and right. But I can't get the playhead to control the current image that is displayed in the image sequence. In the code for the image sequence I specify the number of frames, so I'm assuming I need to divide the length of the progress bar into an equivalent number of 'units' and then advance or rewind the image sequence every time the play head is dragged by one 'unit'.
- 8 replies
-
- scrolltrigger
- draggable
- (and 4 more)
-
Hello everyone, I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/ Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code: HTML <button class="btn btn1">BOUTON1</button> <button class="btn btn2">BOUTON2</button> <button class="btn btn3">BOUTON3</button> <canvas id="canvas"></canvas> JAVASCRIPT var baseURL = "anim3/"; var canvas = document.querySelector("#canvas"); var context = canvas.getContext("2d"); var sprite = { frame: 1, lastFrame: 240, totalFrames: 240, textures: [] }; var animation = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 100, roundProps: "frame", ease: Linear.easeNone }); var animation2 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 150, roundProps: "frame", ease: Linear.easeNone }); var animation3 = new TimelineMax({yoyo: true,paused: true,onUpdate: drawSprite}) .to(sprite, 2, { frame: 2, roundProps: "frame", ease: Linear.easeNone }); loadTextures(sprite.totalFrames) .then(resizeCanvas) .catch(function(reason) { console.log(reason) }); function drawSprite() { // No changes if (sprite.frame === sprite.lastFrame) { return; } context.drawImage(sprite.textures[sprite.frame], 0, 0); sprite.lastFrame = sprite.frame; } function resizeCanvas(textures) { var texture = textures[0]; sprite.textures = textures; canvas.width = texture.naturalWidth || texture.width; canvas.height = texture.naturalHeight || texture.height; canvas.classList.add("is-loaded"); var aspectRatio = canvas.height / canvas.width; // BASE base_image = new Image(); base_image.src = 'anim3/animhead_01.jpg'; base_image.onload = function(){ context.drawImage(base_image, 0, 0); } } function loadTextures(numTextures) { var promises = []; for (var i = 1; i <= numTextures; i++) { var index = i < 100 ? "0" + i : i; promises.push(loadTexture(baseURL + "animhead_" + index + ".jpg")); } return Promise.all(promises); } function loadTexture(path) { return new Promise(function(resolve, reject) { var img = new Image(); img.onload = function() { resolve(img); } img.onerror = function() { reject("Error loading " + path); }; img.src = path; }); } $( ".btn1" ).click(function() { animation.play(); }); $( ".btn2" ).click(function() { animation2.play(); }); $( ".btn3" ).click(function() { animation3.play(); }); Someone can help me ? Thank you.
-
//old way tl.add([ //single hop TweenMax.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: Power1.easeInOut}), TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}), TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}), ],0, "sequence"); //new way tl.add([ //single hop gsap.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: "power1.inOut"}), gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}), gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}), ],0); Hi! This is my first ever post in the forums, but I've gotten so much valuable information from here over the past several years, so first and foremost, this community has my great appreciation. After over a year having not directly touched banner/GSAP animation, I recently dove back in and saw some amazing new things had happened with the new GSAP. But then I saw something I was quite sad about...like, it surprised me just how sad haha. One of my favorite ways to break out smaller pieces of complex animations was with the method under "//old way" in the code snippet (the codepen is just an example of one such complex animation where these tween arrays were extremely helpful). It was a beautiful thing to animate freely with any combination of 'from, to, fromTo, and set' then slap a "sequence" after the position parameter and know that the whole little sequence could then be moved around on the timeline without the need for further nesting timelines or doing a bunch of math for delay values. You could even add negative delays to get some overlap if desired—it was slick! Under "//new way," durations of tweens get added for the delay value of the next tween. It works the same way as "sequence" did, but it's more work, and animating becomes a pain as you're dialing it in because you have more things to change. Is there any hope for the "sequence" method on tween arrays to make a comeback? It's also very likely that I'm not versed enough in the new GSAP to know there's something better, faster, and stronger than my beloved "sequence". I am aware of the new keyframes method, which seems super cool, but as far as I know, not as cool for two reasons: you can't combine "from/fromTo/to" within the keyframe sequence, and you can't mix targets within the keyframes. That makes sense when you think of them strictly as keyframes, but I miss the flexibility. Have I missed something with the keyframes method? Or is there some other new method that I should explore? I appreciate any thought toward this, and I'm curious to know if I'm alone or if anyone else feels like something has been lost here.
-
Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
-
Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
- 18 replies
-
- javascript
- jquery
- (and 4 more)
-
Hello! I didn't find any sprite animation plugin for TweenMax and decide to write my own I hope it will be useful for somebody. Github link Demo here I apologize in advance for the quality of the code, this is my first attempt I will be glad to hear comments and suggestions from GSAP masters and all community.
- 11 replies
-
- sprite
- spritesheet
-
(and 1 more)
Tagged with:
-
Hi everyone, Only started using GSAP yesterday, until that point I was using Velocity.js on the basis of the rather disingenuous test that was originally listed on Julian's site (intentionally or not!) So anyway I discovered that GSAP dunks all over it and I wanted in! So, at the moment I'm making a UI pack for GSAP, since that was one of my most used features of Velocity, and it's great for front-end delights. It's going really well and I've taken to GSAP fairly quickly--but some things still elude me. One thing I'm trying to achieve is to do with one of the animations I've made, it's a 'shake', these are my first with multiple tween points, and I'm trying to figure out the way I'd go about successfully staggering a whole sequence on an array of elements. E.g. case 'stagger.shake': animate.to( element, 0.1, {left: "-=" + (nudge/2) + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "-=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "-=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "+=" + nudge + "px", ease:easing} ).to( element, 0.1, {left: "0px", ease:easing} ); break; My initial approach was something like this: case 'stagger.shake': animate.staggerTo( element, 0.1, {left: "-=" + (nudge/2) + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "-=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "-=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "+=" + nudge + "px", ease:easing}, stagger ).staggerTo( element, 0.1, {left: "0px", ease:easing}, stagger ); break; I'm sure one of you guys knows exactly what I'm missing! Seems like a great community here and looking forward to becoming a part of it. GSAP is awesome. And not in the desensitised meaning of the word, like genuinely awesome!
-
I'm new to GSAP. Is there a way to do this with GSAP, with less code? Will it be more performant with GSAP? Thanks, =: s
-
Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?
-
Hi Guys, I'm wondering can you give me a little help. I'm using TimelineMax within and for loop and the animations are being messed around... basically it looks like everything is being scarmbled CODE: for(var i:uint = 0; i < attackEnemiesToAnimate.length; i++) { enemyToTrack = attackEnemiesToAnimate[i]; createAnimation(enemyToTrack); if(enemyToTrack.x == stage.stageWidth - 20) { attackEnemiesToAnimate.splice(i,1); this.removeChild(enemyToTrack); enemyToTrack = null; } enemyToTrack = null; } private function createAnimation(e:Enemy):void { var tl:TimelineMax = new TimelineMax(); tl.to(e, 0.5, {x:stage.stageWidth - 100, y:50},1).to(e, 0.5, {x:pirate.x, y:pirate.y},2).to(e, 0.5, {x:-stage.stageWidth - 30, y:-stage.stageHeight - 10}, 3); e = null; tl =null; } Any Suggestions Cheers, John
- 11 replies
-
- timelinemax
- tweening
-
(and 1 more)
Tagged with:
-
Hi all, I've been watching a few tutorials around tweening with the new GSAP for javascript but I'm still wondering how I would go about tweening text. I see that Carl has animated text in his video here: http://www.snorkl.tv...red-javascript/ so I'm wondering if those are just images or css text elements? Text animation in Flash through GS was a breeze which makes me think I'm not approaching the same goal (but in javascript) the right way. Essentially, I have a banner with graphic and text elements that I'd like to animate in a sequence. Are there any tutorials out there for this now? Carl, I know you're probably working on one so if you have time for some insight, I'd appreciate it! thanks!